ansaurus

Question

Answer 1

A:

You can use a wrapper with negative margins and rgba(255,255,255,.5) as border-color.

MatTheCat 2010-10-05 15:03:10

Negative margins don't work like this (at least in firefox), the border still displays around the image, margin always renders outside the border. Also rgba as border-color isn't supported by internet explorer, so you might want to use another method for creating the transparency.

Willem 2010-10-05 21:43:14

IE don't support any type of transparency except pngs-24 but in this case you have to use border-image... which is not implemented in IE. The best approch would be to create "pre-borderer" images yourself or with PHP library such GD.

MatTheCat 2010-10-06 07:19:03

IE does do transparency, just add this css style: filter:alpha(opacity=50); or filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); IE only and remember that this affects the whole element and all contents, so don't apply this to the image, only to the borders.

Willem 2010-10-06 20:23:17

Answer 2

A:

Tested in firefox and ie8 (no opacity yet in ie8, but you can use a filter for that):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
           "http://www.w3.org/TR/html4/strict.dtd"&gt;
    <html>
    <head>
        <title>test</title>
        <style type="text/css">
            .imgcontainer{padding:0; position: relative; 
                        display: inline-block; overflow: hidden;}
            .imgcontainer img{display:block;}
            .borders, .borders2{position: absolute; width:100%; height:100%;
                        border: 4px solid #000;}
            .borders{opacity: .5;}
            .borders2{bottom: 4px; right: 4px;}
        </style>
    </head>
    <body>
        <div class="imgcontainer">
            <div class="borders"><div class="borders2"></div></div>
            <img src="img" />
        </div>  
    </body>
    </html>

This creates a 4px transparent border, but that can easily be changed. Because the opacity only affects the absolute positioned divs the image doesnot become transparent. Two border-divs are needed in this example because this way the image size is variable, if your images always have the same size you could do this with only one.

Willem 2010-10-05 21:05:36

ansaurus

tags:

views:

answers:

alpha border inside image

related questions