html - 使两侧的div不透明

Question

我最近为我的网站创建了这个横幅，但我意识到我只希望我网站的主要部分有 900 像素长。但是，我希望横幅从页面上消失，但让它消失的部分变暗(通过不透明度)。所以，这意味着，我需要将我网站的图像放在中间。这是我到目前为止开发的内容:

https://jsfiddle.net/h3w89t9y/4/

如您所见，这并不能真正满足我的需要。这是问题所在:

.banner { 
    background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat; 
    background-position: center; 
    margin: 0 auto;
    height:185px;
} 

横幅不是 800 像素。如果我添加 800px 的宽度，它就会像我想要的那样走到中间。但是，图像将被限制为只有 800 像素长，而不是超出 800 像素。

这就是我试图让它看起来像的东西:

https://i.gyazo.com/c38cae7bd34379477a6fcc8eeb160c22.png

如何使我的横幅居中到中间，但两侧是否与不透明度重叠？

Answer 1

你可以像这样使用伪实现你想要的:

body {
    margin: 0;
}
.wrapper {
    background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat center;
    width: 100%;
}
.wrapper:before, .wrapper:after {
    content:'';
    width: calc((100% - 900px) / 2); /*setting the width to the 100% minus your desired header's width / 2 so it will occupy the rest of your content*/
    height:185px;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.3);   /*set the desired opacity*/
}
.wrapper:before {
    left: 0;
}
.wrapper:after {
    right: 0;
}
.banner {
    width: 900px;
    height:185px;
    margin: 0 auto;
}

<div class="wrapper" style="">
    <div class="banner"></div>
</div>

所以这个想法是你的伪元素占据其余的内容并设置它们你想要的透明度，请注意，通过这种方式你也可以设置它们模糊或任何你想要的过滤器。

Here a working jsfiddle to play with