您好我想通过以下步骤创建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支持。

10-05 21:04
查看更多