我有一张图片,希望成为我的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');
}

07-24 21:13