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>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 set opacity in parent div and not affect in child div?
May be it's good if you define your background-image in the
:after
pseudo 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
. Theabsolute
positioning ofbg-img
will not affect the position ofcontent
and will appear behind this. You also want to adjust the positioning and size ofbg-img
usingtop
,bottom
,right
,left
,width
orheight
HTML:
<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 Opacity without breaking content to divs
Use pseudo elements:
http://jsfiddle.net/2dauqf9o/6/
section {
position: relative;
text-align: center;
padding: 120px 0;
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
content: '';
transition: all .15s ease-in-out;
}
}
h2 {
position: relative;
z-index: 1;
}
// Hover
section:hover {
&:after {
opacity: .6;
}
}How to change only the background image opacity?
You could also do this by a pseudo element. Something like this:
section {
position: relative;
padding: 15px;
width: 100%;
height: 700px;
}
section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: .5;
background-image: url(../IMG/Photo_NR1.jpg);
}So you do not need an image tag and you separating the design from content.
Related Topics
How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component
Bootstrap 4 Table With One Column Larger Than Others
How to Place Two Divs Next to Each Other
Is There a CSS Parent Selector
Bootstrap Align Navbar Items to the Right
Css Child VS Descendant Selectors
Css - Why Doesn't Percentage Height Work
What Is a User Agent Stylesheet
How to Center Align Horizontal ≪Ul≫ Menu
Bootstrap 4 Masonry Layout Utilizing Flexbox Grid
How to Change the Color of an Svg Element
Vuetify: Fit V-Image Within the Screen Size
Is There a "Previous Sibling" Selector
How to Disable Margin-Collapsing
Remove White Space Below Image