css - 如何修改 CSS heart 以插入图像？

Question

所以我很喜欢 CSS。但是现在我想修改它并添加内部动态图像。这是我所拥有的:

.heart {
  position: relative;
  width: 100px;
  height: 90px;
  float: left;


width: 100px;
  height: 90px;
  overflow: hidden;
}

.heart.right {
    left: auto;
    right: 0;
}

.heart:before,
.heart:after {
  position: absolute;
  content: '';
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

这是我的 fiddle :https://jsfiddle.net/9g1qswdd/

Answer 1

所有现有答案都可以帮助您将图像放置到心形之上，但不能裁剪或将其剪切成心形.唯一可以帮助您实现后者的现有答案是 clip-path 模型，但该代码会产生不同的输出形状(它可能更多地是关于如何做的示例，而不是直接回答您的问题)。

要将图像插入心形(我假设您的意思是将图像切割成心形)，请不要使用您现有的方法。这非常困难，因为您使用 CSS 方法使用两个旋转元素创建形状。因此，您必须经历以下痛苦 - (a) 将图像分成两部分 (b) 将每一半放在每一侧 (c) 反向旋转图像以抵消设置在元素 (d) 为图像的每一半设置 background-position 以便它们准确匹配等。即使经历了所有这些麻烦，当图像是动态的时你仍然会遇到问题，因为 setting background-position via percentage value work a lot more differently than what we think 。

使用 SVG:SVG 是推荐的工具，用于创建背景不是非纯色的复杂形状。

借助 SVG，我们可以使用 path 元素轻松创建复杂的形状，并且还可以添加图像作为背景或填充。 SVG 是可扩展的，因此在响应式设计中非常有用。使用 SVG 还可以让我们更好地控制形状本身。

下面是一个使用 SVG 创建的心形，并在其中插入了一张图片作为背景。

svg {
  height: 200px;
  width: 200px;
}
path {
  fill: url(#bg-image);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<svg viewBox='0 0 100 100'>
  <defs>
    <pattern id='bg-image' width='1' height='1' patternUnits='objectBoundingBox'>
      <image xlink:href='https://placeimg.com/100/100/nature/7' width='100' height='100' />
    </pattern>
  </defs>
  <path d='M50,90 L20,60 
           A15,15 0 0,1 50,30 
           A15,15 0 0,1 80,60 z' />
</svg>

下面是 path 元素的 d 属性中使用的命令的非常简短的解释。更详细的解释可以在 this MDN page 中找到:

• M - 将笔移动到命令后立即给出的坐标指定的点。
• A - 以指定的 X 和 Y 半径绘制圆弧，在命令后指定的点结束。
• L - 从一个指定点到另一个指定点画一条直线。
• z - 通过从路径的最后一个点到第一个点画一条直线来关闭路径。

---

您还可以使用基于 SVG 的 clip-path 定义来剪辑图像，如下面的代码片段所示，但浏览器对 clip-path 的支持较低。

img {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<svg viewBox='0 0 100 100' height='0' width='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M.50,.90 L.20,.60 
           A.15,.15 0 0,1 .50,.30 
           A.15,.15 0 0,1 .80,.60 z' />
    </clipPath>
  </defs>
</svg>
<img src='https://placeimg.com/100/100/nature/7' />
<img src='https://placeimg.com/200/200/nature/7' />