html - 如何使每个区域的背景透明而不是HTML中的内容

标签 html css

<分区>

我有将页面分成 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/

上一篇:html - CSS3 Fontawesome 复选框点击事件

下一篇:html - 图片库对齐问题

相关文章:

Javascript 复选框填充输入并将不同的值传递给表单

javascript - 将鼠标悬停在一个 div 上以显示某个类的最近 div

javascript - 响应式视频浏览器不稳定,Safari 除外

css - 自动向右滚动

javascript - md-button 内的可点击图标

javascript - 如何使用 HTML 按钮调用 javascript 函数

html - Ul LI 菜单在 IE 中不显示为 block

javascript - 如何将按钮/输入保留在图像下方?

php - 将 Wordpress 菜单 css 类添加到 <span class ="">

Javascript 不会火?