如何修改CSS心插入图片内？

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

你的css应该是

.heart-img{
  position:absolute;
  width:40px;
  height:40px;
  top:20px;
  left:30px;
  z-index:1000;
}

html

<div class="heart">
  <img src="http://lorempixel.com/400/200/sports/1" class="heart-img">
</div>

https://jsfiddle.net/9g1qswdd/3/

Answer 2

如果你想在心脏内部添加一个动态图像，像这样的东西应该可以做到这一点：

https://jsfiddle.net/kn1m081z/

我添加了一些简单的 CSS 来设置图像的大小，如下所示：

.heart img
{
position:relative;
z-index:3;
left:34px;
top:20px;
width:30px;
height:30px;
background:#ff5500
}

我已经为图像设置了背景色，这样您就可以看到图像的位置 - 一旦您将图像 src 动态添加到我添加的图像标签中，您就会看到心脏内部的动态图像 - 这应该成为你所追求的！

Answer 3

您可以在 .heart 上添加背景图片并将底部移动 5px 到心脏

.heart {
   background-image: url('');
} 
.heart:before,
.heart:after {
  top: 5px;
}

Answer 4

我建议使用 clip-path 属性 of CSS。我尝试制作一个对话框：

.clip-path {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

https://jsfiddle.net/9g1qswdd/5/

同样你可以尝试用clip-path属性做一颗心。为了让生活更轻松，您可以使用此工具为您做到这一点：http://bennettfeely.com/clippy/

Answer 5

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

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

使用 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 - 通过从路径的最后一个点到第一个点画一条直线来关闭路径。

您也可以使用基于 clip-path 定义的 SVG 来裁剪图像，如下面的代码片段所示，但浏览器对 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' />

Answer 6

你必须让 img class "relative" 和 heart class "absolute"

<style>
 .img
   {
    position:relative;
    background-image: url('');      
   }

   .heart{position:absolute; top:50; left:50%;}

</style>

<div class="img"><div class="heart"></div></div>

Answer 7

假设要将心放在纯色背景上，可以选择性地隐藏伪元素上放置的几个渐变图像。

这样做的好处是可以在背景图像尺寸上使用封面或包含：

.heart2 {
  width: 300px;
  height: 300px;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
  position: relative;
  border: solid 1px red;
}

.heart2:before {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  left: -75px;
  top: 75px;
  transform: rotate(45deg);
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right top, left bottom;
}

.heart2:after {
  position: absolute;
  width: 114%;
  height: 114%;
  content: '';
  left: -21px;
  bottom: 70px;
  transform: rotate(45deg);
  background-image: radial-gradient(circle at center 170px, transparent 85px, white 70px), radial-gradient(circle at 170px center, transparent 85px, white 75px), linear-gradient(white, white);
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: right top, left bottom, left top;
}

<div class="heart2"></div>

如何修改CSS心插入图片内？

How to modify CSS heart to insert inside image?

css

css-shapes