Resetting the opacity of a child element - Maple Browser (Samsung TV App)
The problem you probably have (based on looking at your selectors) is that opacity affects all child elements of a parent:
div
{
background: #000;
opacity: .4;
padding: 20px;
}
p
{
background: #f00;
opacity: 1;
}
http://jsfiddle.net/Kyle_/TK8Lq/
But there is a solution! Use rgba background values and you can have transparency wherever you want :)
div
{
background: rgba(0, 0, 0, 0.4);
/*opacity: .4;*/
padding: 20px;
}
p
{
background: rgba(255, 0, 0, 1);
/*opacity: 1;*/
}
http://jsfiddle.net/Kyle_/TK8Lq/1/
For text, you can just use the same rgba code, but set to the color property of CSS:
color: rgba(255, 255, 255, 1);
But you must use rgba on everything for this to work, you have to remove the opacity for all parent elements.
http://jsfiddle.net/Kyle_/TK8Lq/2/
Child element inheriting parent's opacity
Use the rgba() color method instead of opacity:
div.background { background: url(klematis.jpg) repeat; border: 2px solid black;}div.transbox { margin: 30px; background-color: rgba(255, 255, 255, 0.6); border: 1px solid black;}div.transbox p { margin: 5%; font-weight: bold; color: #000000;}<div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box.</p> <input type="button" value="Ok"> </div></div>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 change the opacity of an child element when parent is hovered
Use :hover-selector and change the img opacity:
.child:hover img {
opacity: 0.8;
}Or if you want to change opacity of the while child div then:
.parent:hover .child {
opacity: 0.8;
}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
Disable opacity on child element when parent element has opacity
Solved this problem by changing it to the following:
<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
Content ...
<img src="..." alt="Photo" />
</div>Used just rgba alpha instead of opacity.
Now it works.
Related Topics
How to Apply a Style to All Children of an Element
Expanding the Parent Container with 100% Height to Account for Floated Content
Print Styles: How to Ensure Image Doesn't Span a Page Break
Does Less Have an "Extend" Feature
What Does @-Moz-Document Url-Prefix() Do
How to Specify Table's Height Such That a Vertical Scroll Bar Appears
Safe Width in Pixels for Printing Web Pages
Using "Word-Wrap: Break-Word" Within a Table
Downloadable Font on Firefox: Bad Uri or Cross-Site Access Not Allowed
Bootstrap Table Striped: How to Change the Stripe Background Colour
Vertically Align Text Within Input Field of Fixed-Height Without Display: Table or Padding