Make a background image transparent using CSS

I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.

I know how to apply transparency to background colours and block level elements but can you do this for a background image?

---

Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.

The way around that is to have an element that contains the background and is transparent ( opacity:0.6; filter:alpha(opacity=60) ), and then float or position the container with the actual content over it.

Here's a sample of how this approach would work:

#container {
    width: 200px;
    postiion: relative;
  }
  
  #semitrans {
    width: 100%; height: 100px;
    background: #f00;
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  
  #hello {
    width: 100%; height: 100px;
    position: absolute;
    top: 20px; left: 20px;
  }
  

<div id="container">
    <div id="semitrans"></div>
    <p id="hello">Hello World</p>
</div>

---

No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.

You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!

---

IE uses filter:alpha(opacity=50); while others use opacity:.5
Just include them both.

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

上一篇: 跨浏览器W3C兼容半

下一篇: 使用CSS使背景图像透明