<分区>
<分区>
我有将页面分成 6 部分的代码。如何使每个部分透明而不是实际内容这是我以前拥有的,但我不确定该怎么做我已经尝试为内容创建一个 div并将透明度更改为 1,但这不起作用,所以我该怎么办。
图片是随机的
这是CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#div1, #div2, #div3, #div4, #div5, #div6 {
width: 50%;
height: 50%;
float: left;
}
#div1 {
height: 50%;
width: 50%;
opacity: 0.5;
color: black;
background-image: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
}
#div2 {
height: 50%;
width: 50%;
opacity: 0.5;
color: black;
background-image: url("http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png");
}
#div3 {
background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
}
#div4 {
background: #444;
}
#div5 {
background: #555;
}
#div6 {
background: #666;
}
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure mollitia molestias recusandae nulla placeat repellat odio eos. Blanditiis nulla suscipit sequi ducimus distinctio quo tempore.</p>
</div>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure mollitia molestias recusandae nulla placeat repellat odio eos. Blanditiis nulla suscipit sequi ducimus distinctio quo tempore.</p>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div5">
</div>
<div id="div6">
</div>
最佳答案
所以,你想改变透明度,而不是文本的透明度?
您可以增加不透明度(范围从 0.0 - 1.0,数字越小,图像越透明)。
当您不想对子元素(在本例中为您的段落内容)应用不透明度时,您也可以使用 RGBA 颜色值。
来自 w3schools.com:http://www.w3schools.com/css/css_image_transparency.asp
RGBA 颜色值指定为:rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
示例代码:
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
希望这对您有所帮助!
关于html - 如何使每个区域的背景透明而不是HTML中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40334457/