如何仅将背景应用于特定元素? [英] How to apply background to specific elements only?

问题描述

是否存在一种优雅的，某种简单的方法来切换圆的背景以及其下的div背景?

Is there an elegant, some kind of an easy way to switch the circle's background with the div's background under them?

我希望圆应用div一个"图像背景，但div一个"不可见(而不是可见性:hidden ofc).

I want the circles to apply the div "one" image background, but the div "one" to be invisible(not the visibility:hidden ofc).

我不需要对此进行任何修改，我想要一种优雅/简单的方法来实现这一目标.

I don't need to hardcore the heck out of it, I want an elegant/sort of an easy way to make this.

IE10/11支持及更高版本.

IE10/11 support and above.

.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;
}

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

推荐答案

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

I don't think there is an easy CSS solution for this but you can use 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>

这篇关于如何仅将背景应用于特定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！