Question

我最近为我的网站创建了这个横幅，但我意识到我只希望我网站的主要部分长达900px。但是，我希望横幅可以在页面上运行，但是它的运行部分会变暗（通过不透明度）。所以，这意味着，我需要让我的网站图像位于中间。这是我到目前为止开发的内容：

正如你所看到的，这并不能真正得到我所需要的东西。问题在于：

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

横幅不是800px。如果我添加800px的宽度，它将像我想要的那样进入中间。但是，图像将被限制为仅800px长而不是溢出800px。

这就是我试图让它看起来像：

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

如何将横幅放在中间位置，但边缘与不透明度重叠？

Answer 1

你可以像这样使用伪实现你想要的东西：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Here a working jsfiddle to play with

Answer 2

你不能像这样控制单个背景的不透明度，你需要另一个元素。例如：

.banner, .bannert {
    background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
    background-position: center;
    margin: 0 auto;
    height:185px;
}
.banner {
    max-width: 800px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
.bannert {
    background-repeat: repeat-x;
    opacity: 0.5;
}

<div style="width: 100%; background: black; padding: 1px;position: relative;">
    <div class="bannert"></div>
    <div class="banner"></div>
</div>

https://jsfiddle.net/h3w89t9y/6/

Answer 3

试试这个;首先添加两个divs，左侧添加一个，右侧添加一个，因此您可以将所需的不透明度应用于它们并使横幅边缘过滤，查看下面的代码段;

<强> HTML

<div style="width: 100%; padding: 1px;">
        <div class="banner">
            <div class="trans_right"></div>
            <div class="trans_left"></div>
        </div>
</div>

<强> CSS

.trans_right {

    padding: 2rem;
    width: 13%;
    float: right;
    background: rgba(71,67,255,0.9);
    height: 65%;
}

.trans_left {

    padding: 2rem;
    width: 13%;
    float: left;
    background: rgba(71,67,255,0.9);
    height: 65%;
}

我真的不确定是否有更好的方法可以做到这一点，但它会为您提供所需的信息，请查看链接： Transparent Sides

使div不透明

3 个答案: