使用 css 用颜色部分填充 svg/png

Question

我是 CSS HTML 的新人。我正在尝试使用 CSS 关注事物。我有一个png图标。现在我想部分 fill-up 它与图像的 link 一样从底部到顶部的颜色。

Answer 1

你想实现这样的目标吗？我在你的图钉中插入了一个div（代表填充）并将position 属性设置为absolute。此外，我将代表引脚的父级 div 的 position 属性更改为 relative，现在您可以对齐填充绝对但在其父级内。

body,
html {
  height :100%;
}
body {
  background: #2F2F2F;
}
.pin {
  width:30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: black;
  position: relative;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin-fill {
  width :10px;
  height: 10px;
  background: yellow;
  position: absolute;
  border-radius: 50% 50% 50% 0;
  transform: rotate(1 deg);
  left: 0;
  bottom: 0;
}

<div class='pin'>
  <div class="pin-fill"></div>
</div>

编辑

如果您希望您的内针 (.pin-fill) 看起来像填充物，我建议您将其 border-radius 更改如下。

border-radius: 0 100% 0 0;

片段

body,
html {
  height :100%;
}
body {
  background: #2F2F2F;
}
.pin {
  width:30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: black;
  position: relative;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin-fill {
  width :10px;
  height: 10px;
  background: yellow;
  position: absolute;
  border-radius: 0 100% 0 0;
  transform: rotate(1 deg);
  left: 0;
  bottom: 0;
}

<div class='pin'>
  <div class="pin-fill"></div>
</div>

这里是一个普通填充的例子

body,
html {
  height: 100%;
}
body {
  background: #2F2F2F;
}
.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: black;
  position: relative;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.pin-fill {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid yellow;
  position: absolute;
  left: -5px;
  bottom: 0px;
  transform: rotate(45deg);
}

<div class='pin'>
  <div class="pin-fill"></div>
</div>

使用 css 用颜色部分填充 svg/png

partially filling svg/png with color using css

css

html

png