图像有一个洞通过两个背景

Question

在链接上有一个例子;我有三个元素，在这种情况下，身体具有宇宙背景，div，具有白色背景和img，其中中间有一个洞。我希望在心形中看到第一个UNIVERSE背景，而不是第二个/ WHITE。

https://jsfiddle.net/adrianvcch/t053p4hb/

html {
  background-color: black;
}
body {
  margin: 50px;
  background-color: white;
  height: 500px;
}
.heart {
  position: relative;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}

<div class="heart">
  <img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>

Answer 1

CSS屏蔽

面具@ MDN

＆＃13;

＆＃13;

html {
  background-image: url(http://scienceblogs.com/startswithabang/files/2013/02/2xcluster.jpg);
}
body {
  margin: 50px;
  text-align: center;
}
.heart {
  position: relative;
  display: inline-block;
  height: 200px;
  background: white;
  -webkit-mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
  mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
}

＆＃13;

<div class="heart">
  <img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

修改

使用图片：

由于真实案例需要在这里使用图像可以做什么：

CODE SNIPPET

＆＃13;

＆＃13;

body {
  margin: 50px;
  background-color: white;
  height: 500px;
}
html,
.heart {
  background-color: black;
}
.heart {
  position: relative;
  max-height: 200px;
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
}

＆＃13;

<div class="heart">
  <img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>

＆＃13;

＆＃13;

＆＃13;

<强> SOLUTION：

使用CSS形状：

这是你可以尝试的东西：

1. 使用纯CSS形状的心形。
2. 使用相同的css属性，使用逗号分隔的多个选择器在html和heart中设置相同的背景颜色。

CODE SNIPPET

＆＃13;
＆＃13;
body {
  margin: 50px;
  background-color: white;
  height: 500px;
}
.heart {
  display: inline-block;
  height: 60px;
  width: 60px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
}
.heart:before,
.heart:after {
  content: "";
  border-radius: 50%;
  height: 60px;
  width: 60px;
  position: absolute;
}
.heart:before {
  left: 0;
  top: -30px;
}
.heart:after {
  left: 30px;
  top: 0;
}
html,
.heart,
.heart:before,
.heart:after {
  background-color: black;
}
.heart-wrapper {
  background-color: #c95253;
  padding: 105px 80px 35px 80px;
  display: inline-block;
}
＆＃13;
<div class="heart-wrapper">
  <div class="heart"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

将此更改添加到您的代码中，但您的图片应该是透明的，以适应background color。

html {
   background:url(https://source.unsplash.com/category/nature);
 }

body {

  margin: 50px;
  height: 500px;
}

.heart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
 }
img{
  width:100%;
  height:200px;
 }