本文介绍了如何仅将背景应用于特定元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否存在一种优雅的,某种简单的方法来切换圆的背景以及其下的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>
这篇关于如何仅将背景应用于特定元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!