您好我想通过以下步骤创建Web主题:
1-设置背景图片
First Step Image
2-在最终图片中设置其他背景图像
3-创建圆或框,然后将图像一的一部分作为框背景加载(但是如何?这是我的问题。)
码:
<style>
#Background_1 {
width: 100%;
height: 100%;
background-image: url("img1.jpg");
background-size: 100% 100%;
z-index: 1;
position: fixed;
}
#Background_2 {
width: 100%;
height: 100%;
background-image: url("img2.jpg");
background-size: 100% 100%;
z-index: 2;
position: fixed;
}
.BoxLoad {
width: 250px;
height: 250px;
margin-left: 15%;
box-shadow: 0px 0px 11px 1px rgba(20, 20, 20, 0.8);
color: #FFFFFF;
border-radius: 50%;
display: inline-block;
font-size:24px;
}
</style>
<body>
<div id="Background_1">
<div id="Background_2">
<div class="BoxLoad">
</div>
<div class="BoxLoad">
</div>
<div class="BoxLoad">
</div>
</div>
</div>
在此来源上,我们在背景上有1张图片(我们看不到),在背景上还有1张其他图片(差异)。和盒子上。框没有背景色,只有阴影和图片2背景。但是我需要的是将背景1加载为框背景(背景1的一部分而不是背景2),而背景1仍在背面2下。这意味着如果我在页面的任何位置创建了其他框,并使用自定义新设置,则背景为那个盒子就是背面1张图片的那个点。
最后,我需要这样的东西:
End Image (What i want)
最佳答案
您可以检查this link
主要思想是在“第3步圆圈”中放置相同的图像(与背景相同),并将其位置固定为与背景相同。
但是,它只是模拟透明度。
编辑:在另一个答案中提到@Mike Stringfellow,您可以使用SVG clipPath,但需要HTML5支持。