Question

我设置的段落的不透明度类似于这个网站，但是当我在我的div上使用不透明度0.1时，文本的不透明度也是1，我设置了两个div但是仍然不一样这个网站http://www.infosys.com/about/Pages/index.aspx。我的http://jsfiddle.net/5v3p7/。

Here is my html:
<!DOCTYPE.html>

</html>

<div id="center">

<div id="content">


<div id="text">
Building Tomorrow’s Enterprise

Infosys is a global leader in consulting, technology and outsourcing solutions. As a proven partner focused on building tomorrow's enterprise, Infosys enables clients in more than 30 countries to outperform the competition and stay ahead of the innovation curve. With US$8.095bn in LTM Q3 FY14 revenues and 158,000+ employees, Infosys provides enterprises with strategic insights on what lies ahead. We help enterprises transform and thrive in a changing world through strategic consulting, operational leadership and the co-creation of breakthrough solutions, including those in mobility, sustainability, big data and cloud computing.

Learn more about how Infosys is Building Tomorrow’s Enterprise
Learn more about industry solutions from Infosys.
Learn more about services from Infosys
Learn more about products from Infosys

</div>


</div>

</div>

<div id="img">

<img src="http://hoklife.com/wp-content/uploads/2009/02/office-1.jpg">
</div>


Here is my css:
html
{
background:blue;
}
#content
{
position:relative;
z-index:1;
background:black;
color:silver;
min-height:1000px;
opacity:0.5;
font-size:40px;
width:960px;
margin-right:auto;
margin-left:auto;
padding:20px;
}
#text
{
position:relative;
z-index:3;
color:white;
min-height:500px;
opacity:10;
width:500px;
font-size:40px;
}
#img
{
position:fixed;
top:-50%;
left:-50%;
height:200%;
width:200%;
}
#img img
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-height:50%;
min-width:50%;
}

Answer 1

将背景与rgba一起使用，如下所示： -

#content {
position: relative;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
color: silver;
min-height: 1000px;
font-size: 40px;
width: 960px;
margin-right: auto;
margin-left: auto;
padding: 20px;
}

段落的不透明度

1 个答案: