How to apply an opacity without affecting a child element with html/css?
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>How to set opacity in parent div and not affect in child div?
May be it's good if you define your background-image in the
:afterpseudo class. Write like this:.parent{
width:300px;
height:300px;
position:relative;
border:1px solid red;
}
.parent:after{
content:'';
background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
opacity:0.5;
}
.child{
background:yellow;
position:relative;
z-index:1;
}Check this fiddle
Apply opacity without effecting the child elements
The opacity will affect all children of an element. You can achieve what you want by using two parallel divs, one for the background image with opacity and the other with the span and the rest of the
content. Theabsolutepositioning ofbg-imgwill not affect the position ofcontentand will appear behind this. You also want to adjust the positioning and size ofbg-imgusingtop,bottom,right,left,widthorheightHTML:
<div>
<div class="bg-img"></div>
<div class="content">
<span>text</span>
</div>
</div>CSS:
.bg-img {
position: absolute;
}
.bg-img:hover {
opacity: 0.7;
}Background image opacity without affecting text
Follow this link How can i change background image opacity without changing on div content?
.content { position: relative;}
.content::after { content: ""; background: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') left top no-repeat, url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') right bottom no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }<div class="content"> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div></div>how to make a div transparent without affecting the child in CSS 3?
Instead of using
opacity, usergba()likebackground: rgba(0,0,0,.7)whereastands for alpha/opacity. So change the below block of code like#header{
background-color: rgba(0,0,0,.7); /* 0.7 Opacity for black */
width:1349px;
height:60px;
position:fixed;
z-index:2;
}Opacity of div's background without affecting contained element in IE 8?
The
opacitystyle affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.The CSS is fairly simple:
.myelement {
background: rgba(200, 54, 54, 0.5);
}...where the first three numbers are the red, green and blue values for your background colour, and the fourth is the 'alpha' channel value, which works the same way as the
opacityvalue.See this page for more info: http://css-tricks.com/rgba-browser-support/
The down-side, is that this doesn't work in IE8 or lower. The page I linked above also lists a few other browsers it doesn't work in, but they're all very old by now; all browsers in current use except IE6/7/8 will work with rgba colours.
The good news is that you can force IE to work with this as well, using a hack called CSS3Pie. CSS3Pie adds a number of modern CSS3 features to older versions of IE, including rgba background colours.
To use CSS3Pie for backgrounds, you need to add a specific
-pie-backgrounddeclaration to your CSS, as well as the PIEbehaviorstyle, so your stylesheet would end up looking like this:.myelement {
background: rgba(200, 54, 54, 0.5);
-pie-background: rgba(200, 54, 54, 0.5);
behavior: url(PIE.htc);
}Hope that helps.
[EDIT]
For what it's worth, as others have mentioned, you can use IE's
filterstyle, with thegradientkeyword. The CSS3Pie solution does actually use this same technique behind the scenes, but removes the need for you to mess around directly with IE's filters, so your stylesheets are much cleaner. (it also adds a whole bunch of other nice features too, but that's not relevant to this discussion)
Related Topics
How to Make a Chevron Arrow Using CSS
Html5 - Mp4 Video Does Not Play in IE9
What Replaces Cellpadding, Cellspacing, Valign, and Align in HTML5 Tables
Convert a SQL Query Result Table to an HTML Table for Email
Why Doesn't "Display: Block" & "Width: Auto" Stretch a Button to Fill the Container
Why Is an Element with Position: Fixed Moving with a Non-Positioned Sibling
How to Scale a Stubborn Svg Embedded with the <Object> Tag
Why Do I Need a Doctype? (What Does It Do)
Stretching <A> Tag to Fill Entire <Li>
How to Center the Contents of a Div
Play Sound File in a Web-Page in the Background
Href="Tel:" and Mobile Numbers
Do Http Post Methods Send Data as a Querystring
How to Choose Between Get and Post Methods in HTML Forms
Padding Is Not Working in Safari and Ie in Select List