how can i produce an image with a semi-transparent border?

Posted by david on 28. April 2009 21:41

this technique works:

!-- Outer Div -->

div style="width:300px;height:200px;background:url(http://www.mandarindesign.com/images/calla.jpg) repeat;border:1px solid white;">

!-- Opacity Border -->

   <div style="width:280px;height:180px;border:10px solid white;filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;">

   </div>

!-- End Outer Div --> 

</div>

a discussion that explains how opacity is inherited … so an outer div with opacity = 50% cascades to the children … if the children declare opacity = 100%, it’s still 50% because the children’s percentage applies to the parent’s.  100% of 50% = 50%. doh.

This is a tutorial on layers using css z-index, by using absolute positioning, we can place things on top of each other.

so, we place an image down, absolutely positioned … then, using the first technique of a translucent border,  we place an empty bordered div absolutely positioned on top of the image. 

almost worked, but absolute positioning breaks out of the containing div, so my framed image ended up at the top of my page. 

with a little extra help from this which explains positioning ….

I have a class photoBox, in which I put the img element and a photoFrame class.  The photoBox has positioning:relative so that it sets inside of whatever container I’ve got it in.  If an absolutely positioned element’s parent is relatively positioned things, the child is absolutely positioned within the parent.

<div class="photoBox">            

        <img src="http://northwest.smugmug.com/photos/513951650_cdtCr-Th.jpg" alt="miata"/>

        <div class="photoFrame"></div>    

</div>

.photoBox

{

    position:relative;

    width: 150px;

    height: 150px;

}

.photoBox img

{

    position: absolute;

    left: 0px;

    top: 0px;

    z-index:1;

    height:150px;

    width:150px;

}

.photoFrame

{

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: 2;    

    width:140px;

    height:140px;

    border:5px solid white;

    filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;    

}

The following is an img element – not a css declared background img:

Bonus – this appears to be working in IE6 … at least according to Expression Web SuperPreview