我有一张图片,希望成为我的wordpress网站的整个屏幕宽度。我也想这样做,以便当用户缩小图像时使用该图像的边缘(例如,假设图像的宽度为800,那么它将在左侧使用0-100像素,也许在700-800 px代表右边),然后重复执行这些操作,并做出响应。我认为使用严格的代码不可能做到这一点,因此,如果我对要重复的边缘进行光处理,那么如何覆盖这3张图像并使其表现出相应的效果。这可能吗?图片基本上是天空,并且大部分都清晰可见,也许有云,所以重复一下就可以了:)
我还没有用代码尝试过它,但是对CSS还是有点陌生,所以我很乐意为您提供一些建议!现在,我只有一个带有背景URL的div类,其宽度为100%,但是在缩小时会重复。
这是我正在谈论的图像:
最佳答案
经过一番摆弄后,我想出了以下利用:before
和:after
CSS伪元素的解决方案,这使我的解决方案可以在不添加任何其他元素的情况下工作。本示例使用原始宽度为800px
且高度为300px
的图像。因此,中间部分为600px
,侧面图像为100px
宽。在以下CSS中更改这些数字以适合您的图像尺寸。 See a working jsFiddle demo with a poorly drawn cloud.
<div class="header"></div>
.header {
position: relative;
width: 100%;
height: 300px;
background-image: url('http://example.com/path/to/center-image.png');
background-position: center;
background-repeat: no-repeat;
}
.header:before,
.header:after {
content:"";
display: block;
position: absolute;
top: 0px;
height: 300px;
width: calc((100% - 600px) / 2);
}
.header:before {
left: calc((100% - 600px) / 2 - (100% - 600px) / 2);
background-image: url('http://example.com/path/to/left-image.png');
}
.header:after {
right: calc((100% - 600px) / 2 - (100% - 600px) / 2);
background-image: url('http://example.com/path/to/right-image.png');
}