如何使不透明度仅适用于div类中的背景

Question

When I set the opacity to my main-body div class, it makes the text and everything else opacity too. I only want the gray background to have opacity. Here is my code:

<div class="main1">
content
</div>

CSS:

.main1
{
background-color:#333333;
border:2px solid #7C7C7C;
text-align:center;
width:1250px;
top:auto;
bottom:auto;
left:300px;
right:300px;
margin-left:auto;
margin-right:auto;
}

Everything gets opacity when this happens. Any help?

Answer 1

只是让背景色不透明

background-color: rgba(51,51,51,0.5);

Answer 2

Make 2 divs inside that with the same size as each other and make them over lap then you make div 1 have opacity and div2 have the content. I would attach an example but in using my phone

Answer 3

background-color:rgba(51, 51, 51, 0.5)

如果您的BG是一种颜色，则可以使用上面代码中0.5的alpha滤镜。

Answer 4

Set the background color to rgba(r,g,b,opacity)

background-color: (51, 51, 51, 0.2).

This will put opacity on only the background, and not the entire div (which included your text )

You can use a converter to convert hex colors to rgb colors.

Answer 5

You also need to color the text!! First like others said use CSS background color. Here's the full code and the JS Fiddle

.main1
 {
 background-color:rgba(255,0,0,0.5);
 border:2px solid #7C7C7C;
 text-align:center;
 width:150px;
 top:auto;
 bottom:auto;
 left:300px;
 right:300px;
 margin-left:auto;
 margin-right:auto;
 color: black;

}

HTML

<div class="main1">
content
</div>