2

Hi all i created a parent div .ima inside which one div called .txt When i give a opacity to .ima then the opacity is applied to .txt automatically this is obvious. But i don't want it to be in this way.

Only .ima should be in 0.5 Opacity and the Text in .txt should be 100% visible.

Is there a way to do this?

Here is the fiddle

I tried Giving Opacity to 1 in .txt its not working. I might Be doing this in a wrong way I don't know.Any help?

Here i mention the Different From the Question refering for possible Duplicate

There They Have given Suggestion to Use rgba But here i don't want to use it Because if i use rgba then this will become either black or some other color that we'll mention.

I want to use background image here.

This is a sample am proposed.

Things like there is no possible.

Also I don't want to use .png images(with semi-transparency). images are subject to change that is why.

Any Way thanks for guys Who have given their answers here.

sun
  • 1,598
  • 11
  • 26
  • 45

6 Answers6

5

The simplest way of doing this assumes you only want .ima's background to be transparent, in which case you should remove opacity and establish a background-colour with a value of rgba(X%,X%,X%, .5), in which case .txt inherits nothing and you can carry on. 

<div class="ima">
    <div class="txt">
        ...
    </div>
</div>

CSS for transparent background:

.ima {
    /* rgba is Red, Green, Blue, Alpha:
     * put in your colour as RGB then add opacity at the end */
    background-color: rgba(255, 0, 0, .5);
}

But if you want some of .ima's children nodes to inherit the transparency (for instance text and elements other than .txt) then the simplest way is to create an immediate descendant that matches the dimensions of .ima and applies the opacity rule:

<div class="ima">
    <div class="txt">
        ...
    </div>
    <div class="ima__transparency">
        ...
    </div>
</div>

CSS:

.ima {
    position: relative;
}

.ima__transparency {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
}

.txt {
    position: relative;
    z-index: 1;
}

Example with background image.

Barney
  • 16,181
  • 5
  • 62
  • 76
  • Thanks, i want to use background image not colour – sun Aug 05 '13 at 12:27
  • @raj Edited the answer to be a bit more explicit as to how you achieve that. – Barney Aug 05 '13 at 13:13
  • Thanks, I would like to have BG image alone transparent other than that i don't want any child to be transparent, i tried Selectors Like `.ima .txt{values}` but no effect – sun Aug 05 '13 at 13:18
  • @raj If you want the background image to be transparent you will need to apply the transparency to an extra element inside `.ima`: use the second scenario (the first one I wrote) and add the background image to `.ima__transparency`. – Barney Aug 05 '13 at 13:23
  • @raj I updated my answer with an example and an extra rule which stops the background appearing on top of your content. – Barney Aug 05 '13 at 13:32
  • So it is not possible to make it with css alone without changing markup, Right? – sun Aug 05 '13 at 13:40
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34841/discussion-between-raj-and-barney) – sun Aug 05 '13 at 13:46
2

You can't not inherit opacity, your options are:

  • Adjust your markup so that .txt is not a child of .ima and then use absolute positioning
  • Don't use opacity, make .txt cover the same area as .ima and give .txt a semi-transparent background

  • If your target audience supports gradients and multiple backgrounds, you can layer an obscuring gradient over the image:

    background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
            url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');

Using this approach you actually only need one div if it's just the text and the image you want to display.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • +1, nice solution! Even better than the gradient would be a [solid color image](http://www.w3.org/TR/2012/CR-css3-images-20120417/#color-images), but they seem to be less supported than gradients :-( – Bergi Aug 05 '13 at 12:59
0

Create a png image(1px/1px) transparent with 60% opacity using photoshop and call in your parent div i.e.

.ima{
  background:url(imagename.png) repeat 0 0;
}
0

Unfortunately you can't using opacity as it is inherited by design.

You could, however, if you are only seeking to make the background color of the parent div semi-transparent using rgba color syntax and a fallback for older versions of ie that do not support the syntax.

e.g. Create a white background with an opacity of 50%.

.parent{
    background: rgba(255, 255, 255, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF);   /* IE6 & 7 */
    zoom: 1;
}

/* IE9 hack to remove filter */
.parent:not(dummy) {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

The first two hex values in the filters represent the opacity of the background. There is a great explanation and rgba to hex converter here.

Word of note. Using this technique reveals a bug in IE where hyperlinks will be exposed through the background of the container if placed above them, for example if used to generate a model background.

James South
  • 10,147
  • 4
  • 59
  • 115
0

You can use :after/:before

HTML
<div>asdsadasd</div>
CSS

div{position:relative;} 
div:after{
content:''; 
position:absolute; 
top:0; 
left:0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity:0.3; 
z-index: -1;}
Anon
  • 2,854
  • 14
  • 18
0

The thing is, the opacity property applies on the whole block. It means that if you apply a 1 opacity to any child element, it will have the maximum opacity towards its parent.

I suggest you use a semi transparent PNG background and add a fix so that older versions of internet explorer handle the opacity :

.ima {
   width:auto;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png');
}

.ima[class] {
   background-image:url('url_to_transparent_image.png');
}

.txt {
   color:white;
}

That is, it's only if you really need a totally opaque text. You can also set the opacity of the parent a bit higher so that your text isn't too transparent and avoid using "dirty" CSS tricks.

Lapixel
  • 144
  • 6