Question

您好我想通过以下步骤创建网页主题：

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>

在这个来源上，我们在背景上有一张图像（我们看不到它）和另外一张（差异）图像。和他们的盒子。框没有背景颜色，只有阴影与图像2背景。但我需要的是加载背景1作为框背景（背景1的一部分而不是背景2），而背景1仍然在背面2.它意味着如果我创建另一个框的任何页面的自定义新设置，背景那个盒子是后面1个图像的那个点。最后我需要这样的东西： End Image (What i want)

Answer 1

您可以为背景图像指定SVG剪辑路径。基本上，你构建如下的圆圈，然后设置背景div的剪辑路径CSS属性，如<xsl:if test="$withYear"> <xsl:text>.</xsl:text> <xsl:value-of select="$year"/> </xsl:if>

clip-path: url(#circles);

完全小提琴：https://jsfiddle.net/hqss8taj/

Answer 2

您可以查看this link

主要想法是在“步骤3圈”中放置相同的图像（如背景中）并将其位置固定为相同的背景。

但是，它只是模拟了透明度。

编辑如前所述@Mike Stringfellow在另一个答案中，您可以使用SVG clipPath，但它需要HTML5支持。

Answer 3

为圆创建多个div并设置圆div的背景图像。定位背景图像以获得所需位置。我已经完成了第一个圈子。为了将圆形div与图像区分到您附加的最终图像，我使用了滤镜。希望这是你想要的。

＆＃13;

.circle{
  background-image: url(http://i.stack.imgur.com/EY480.jpg);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: solid 1px red;
    position: absolute;
    -webkit-filter: brightness(200%);
}

.wrapper{
  position: relative;
  display: inline-block;
}

.circle1{
  top: 72px;
    left: 183px;
    background-position: -183px -72px;
}


.circle2{
  top: 152px;
    left: 183px;
    background-position: -183px -152px;
}

＆＃13;

<div class="wrapper">
  <img src="http://i.stack.imgur.com/OlmRK.jpg">
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
</div>

＆＃13;

在CSS jquery框上的其他图像上加载图像

3 个答案: