Question

I want to give opacity for the div only at the bottom left corner.
Is it possible? how?

<div id="right_img"></div>

css

#right_img
{
     float:right;
     width:600px;
     height:400px;
     margin-top:100px;
     background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
     opacity:0.6;
     filter:alpha(opacity=60); 
}

If I give opacity to the complete div, image clarity will be lost.

Answer 1

Giving Opacity to an element always affects the whole element and all of its child-elements too. If you want to give only one of it’s children the opacity property, you have to declare it directly on that element. Sometimes you have to introduce some helper Elements to achieve the effect you want.

Exception is the opacity you declare on colors which don’t get inherited to the child elements. With the new rgba() declaration, (the fourth parameter is the opacity of the color), you can achieve effect like having a “transparent” div (transparent background) but the font is completely opaque.

In your case it might be sufficient (interpreting your answer – it wasn’t quite clear) to just use the normal background-declaration with this rgba background-color:

#right_img{
   background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
}

with x,y,z = 0...255 and a = 0...1

Note, that the rgba() declaration is not supported in older IEs (even IE8!). You need a filter to support these. Luckily there is one:

filter:progid:DXImageTransform.Microsoft.gradient(
           startColorstr=#aaxxyyzz,
           endColorstr  =#aaxxyyzz);

where the first parameter (a) is the opacity with 0% = 00 and 100% = FF. And xx,yy,zz = 00...FF.