重叠的透明背景？

Question

我正在创建一个小型实验，其中您有一个内容的div，它是居中的。但我想要一个透明的盒子，左边有相同的不透明度。但我似乎无法让它发挥作用。

这两个背景都设置为background-color:rgba(255,255,255,.74);，我已经搜索了这个问题，但我仍然无法让它工作。

我想要的是<div class="left"></div>与<div class="homeheaderblok"></div>具有相同（背景）颜色

<div class="left"></div>存在的原因是因为屏幕较宽。 <div class="headerblok"></div>居中。缩小页面时，headerblok与左侧重叠。

此：

是我想要完成的。当缩小页面而没有双重不透明度时，中间带有文本，必须与左侧重叠。

JSFiddle

Answer 1

您不需要额外的元素（如果我理解您的问题）。我只需要一个伪元素并将其扩展到左侧。这样，您就没有重叠，它也会随着屏幕宽度而缩放：

/* this is the relevant change: */
.headerblok:before{
    position:absolute;
    content:"";display:block;
	background-color:rgba(255,255,255,.74);
    top:0;right:100%;
    width:100%;
    height:100%;
}
/* * * * * * * * * * * * * * * */

#header{
	width:100%;
	position:relative;
}

.bigheader{
	height:480px;
	background-image:url('http://i.imgur.com/3E5BcB2.jpg');
	background-size:100% 100%;
	background-repeat: no-repeat;
}


.headerblok{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-480px;
	margin-top:-145px;
	height:290px;
	background-color:rgba(255,255,255,.74);
}

<div id="header" class="bigheader">
	<div class="headerblok homeheaderblok">
		<div class="container">
			<div class="headertext">
				<h2>Restauratie en onderhoud</h2>
				<small>Restauratie - Carr&eacute;</small>
				<p>Natuurlijk wordt onze oorsprong nooit verlaten en restaureren wij nog steeds monumenten.</p>
				<div class="aboutinfo">
					Meer hierover<div class="aboutarrow"></div>
				</div>
			</div>
		</div>
	</div>
</div>

See your modified example

Answer 2

所以你试图在两个区域中获得相同的颜色，一个是内容，另一个是右边的颜色，对吗？

问题在于，当您重叠透明背景时，您会看到两个背景（因此结果不太透明，想象将两个透明胶片放在彼此的顶部）。

只需从.homeheaderblok

中删除背景属性即可

希望它有所帮助。

Answer 3

嘿，如下所述，在一个名为“headerblok”

的类中更改您的css文件

.headerblok{
    position:absolute;
    top:50%;
    left:50%;
}