Question

是否有一种优雅的，某种简单的方法可以将圆圈的背景切换为div的背景？

我希望圈子应用div＆＃34; one＆＃34;图像背景，但div＆＃34; one＆＃34;是不可见的（不是可见性：隐藏的）。

我不需要硬着头脑，我想要一个优雅/简单的方法来做到这一点。

IE10 / 11支持及以上。

＆＃13;

.one {
  position: relative;
  width: 500px;
  height: 300px;
  background-image: url("https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg");
}

.two,
.three {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  left: 15px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
}

.three {
  left: initial;
  right: 15px;
}

＆＃13;

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>

＆＃13;

Answer 1

我认为没有一个简单的CSS解决方案，但您可以使用SVG：

body {
  background: linear-gradient(to right, blue, red)
}

<svg width="500" height="300">
  <defs>
    <!-- define the mask-->
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- the first hole -->
      <circle r="50" cx="100" cy="150" fill="black"/>
      <!-- the second hole -->
      <circle r="50" cx="400" cy="150" fill="black"/>
    </mask>
    <!-- define the background image -->
  <pattern id="img" patternUnits="userSpaceOnUse" width="500" height="300">
    <image  xlink:href="https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg" x="0" y="0" width="500" height="300" />
  </pattern>
  </defs>
  <!-- create a rect, fill it with the image and apply the above mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>

如何仅将背景应用于特定元素？

1 个答案: