Question

我的图像没有所有屏幕尺寸那么大，但我想通过在任一侧添加重复图案来显示任何宽度的屏幕。我当然可以使图像更宽，但这会导致页面加载速度变慢。

通过文字解释有点困难所以这里有一些图片和JSFiddle Demo。

#layer_top {
    background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
    width:100%;
    height:136px;
}

#layer_transition {
    width:100%;
    height:36px;
    margin-top:-36px;
    background-image:url("http://puu.sh/cajG0/2768274649.png");
    background-repeat:no-repeat;
    background-position:center;
}

#layer_bottom {
    width:100%;
    height:100px;
    background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
}

<div id="layer_top"></div>
<div id="layer_transition"></div>
<div id="layer_bottom"></div>

结果： Result

通缉结果： Wanted Result

Answer 1

您可以通过向顶层添加一个伪元素来实现这一点，该顶层形成为椭圆形，并且它与图层相关。

然后只需将相同的背景图像应用于图层和伪元素：

<强> Example Here

#layer_top, #layer_top:after {
   background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
}

#layer_top { width:100%; height:136px; position: relative; }

#layer_top:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 500px; height: 100%;
    left: 0; right: 0; top: 20%;
    margin: auto;
    border-radius: 50%;
}

您还可以使用clip剪切椭圆形的额外部分。

Answer 2

有点不同的解决方案，但它可能会起作用：

为什么不更换蒙版图像？因此，不要覆盖这个灰色的东西，而是为purprle制作一个叠加层。如果您将中心位于灰色区域的顶部，则得到相同的结果/

Answer 3

嗯，问题在于你创建的div元素很难让它工作。

一个简单的解决方案是使用底部3个不同的div。

<div id="side_layer"></div>
<div id="layer_bottom"></div>
<div id="side_layer"></div>

我为你创建了一个简单的jsfiddle：jsfiddle

直到500px宽度才能正常响应。您可以简单地添加媒体查询，然后隐藏右侧和左侧图层。

Answer 4

你可以很容易地做到这一点。

将CSS类添加到body或在body上创建父div并设置样式。

工作小提琴

http://jsfiddle.net/7n06und5/11/

     .parent {
    margin:0;
    background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
    width:100%;
}

#layer_top {
    background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
    width:100%;
    height:136px;
}

#layer_transition {
    width:100%;
    height:36px;
    margin-top:-36px;
    background-image:url("http://puu.sh/cajG0/2768274649.png");
    background-repeat:no-repeat;
    background-position:center;
}

#layer_bottom {
    width:100%;
    height:300px;
    background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
    width:500px;
    margin:0 auto;
}

HTML

<body class="parent">
<div id="layer_top">

</div>
<div id="layer_transition">

</div>
<div id="layer_bottom">

</div>

</body>

希望对您有所帮助！

Answer 5

您可以使用css border-raidus

尝试此操作

<强> HTML

<div id="header">
    <div id="inner"></div>
</div>

<强> CSS

#header{
    background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
    //height:75px;
    //width:100%; 
    padding:3% 15%;
}
#inner{
    background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
    height:75px;
    width:100%;    
    border-radius:0 0 50% 50%;
}

Fiddle Demo

中心椭圆形，两侧有重复图案

5 个答案: