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

Question

我是 CSS HTML 的新手。我正在尝试使用 CSS 进行跟踪。我有一个png图标。现在我想用颜色从下到上部分填充它，就像图像的链接一样。

Answer 1

您是否正在努力实现这样的目标？ 我在你的 pin 中插入了一个 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 如下。

边界半径: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>