ansaurus

Question

Can you overlay a transparent div on an image

Answer 1

+1 A:

Take a look at:

http://bitsamppixels.com/2008/02/11/cross-browser-transparent-columns/

gahooa 2009-07-26 03:12:15

Probably want to expand on this a little further on here; if that link dies in the future this answer would become useless. :)

Paolo Bergantino 2009-07-26 03:17:35

Answer 2

+4 A:

Definitely.

< div style="background-image: url(image.png);" >

  < div style="position:relative; top:20px; left:20px;">
    Some text here
  < /div>
< /div>

Jon Galloway 2009-07-26 03:13:19

Answer 3

+5 A:

Sure, here is a cross-browser way of doing so:

<html>
  <head>
    <style type="text/css">
      div.imageSub { position: relative; }
      div.imageSub img { z-index: 1; }
      div.imageSub div {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 0;
        padding: 4px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        overflow: hidden;
      }
      div.imageSub div.blackbg {
        z-index: 2;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: 0.5;
      }
      div.imageSub div.label {
        z-index: 3;
        color: white;
      }
    </style>
  </head>
    <body>
      <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
        <img src="image.jpg" alt="Something" />
        <div class="blackbg"></div>
        <div class="label">Label Goes Here</div>
      </div>
    </body>
</html>

This method doesn't require JavaScript, doesn't cause to lose ClearType text in IE, and is compatible with Firefox, Safari, Opera, IE6,7,8... Unfortunately, it only works for one line of text. If you want multiple lines, either adjust div.imageSub div's height and line-height property, or use the following (modifications to the CSS and requires the label to be specified twice).

<html>
  <head>
    <style type="text/css">
      div.imageSub { position: relative; }
      div.imageSub img { z-index: 1; }
      div.imageSub div {
        position: absolute;
        left: 15%;
        right: 15%;
        bottom: 0;
        padding: 4px;
      }
      div.imageSub div.blackbg {
        z-index: 2;
        color: #000;
        background-color: #000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: 0.5;
      }
      div.imageSub div.label {
        z-index: 3;
        color: white;
      }
    </style>
  </head>
    <body>
      <div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
        <img src="image.jpg" alt="Something" />
        <div class="blackbg">Label Goes Here</div>
        <div class="label">Label Goes Here</div>
      </div>
    </body>
</html>

Andrew Moore 2009-07-26 03:25:47

This is amazing thank you so much!

jasondavis 2009-07-26 12:45:48

when running YSlow firefox plugin I notice 1 of the things it mentions being bad use is CSS Expressions, this is not considered one of those correct?

jasondavis 2009-07-26 13:16:38

**@jasondavis:** `filter` and `-ms-filter` is one of them but you don't have the choice for IE. And remember, **YSlow** is not the law.

Andrew Moore 2009-07-26 16:18:31

Answer 4

A:

<html> <body>
                <div style="position: absolute; border: solid 1px red">
                        <img src="http://www.ajaxline.com/files/imgloop.png"/&gt;
                        <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/>
                        <div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;">
                                Hello
                        </div>
                </div>
</body> </html>

drs9222 2009-07-26 03:40:14

ansaurus

tags:

views:

answers:

Can you overlay a transparent div on an image

related questions