CSS Background Opacity

 

This question already has an answer here:

  • How do I give text or an image a transparent background using CSS? 27 answers

    • Children inherit opacity. It'd be weird and inconvenient if they didn't.

    You can use a translucent png for your background image, or use an RGBa (a for alpha) color for your background color.

    Example, 50% faded black background: 

    <div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

    You can use CSS 3 :before to have a semi-transparent background and you can do this with just one container. Use something like this 

    <article>
  Text.
</article>

    Then apply some CSS 

    article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

    Sample: http://codepen.io/anon/pen/avdsi

    Note: You might need to adjust the z-index values.

    The following methods can be used to solve your problem

  • CSS Aplha Transparency Method (doesn't work in IE 8) 

    #div{background-color:rgba(255,0,0,0.5);}

  • Use a Transparent png image according to your choice as background.

  • Use the following css code snippet to create a cross-browser alpha-transparent background. Here is an example with #000000 @ 0.4% opacity 

    .div {  
    background:rgb(0,0,0);  
    background: transparent9;  
    background:rgba(0,0,0,0.4);  
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
    zoom: 1;  
}    
.div:nth-child(n) {  
    filter: none;  
}

    • For more details regarding this technique, see this, which has an online css generator.

    链接地址: http://www.djcxy.com/p/89326.html

    上一篇: 用IE过滤器替代rgba背景：IE9呈现两者！

    下一篇: CSS背景不透明