<style type="text/css">
div#foo {
background: #0000ff;
width: 200px;
height: 200px;
opacity: 0.30;
filter: alpha(opacity = 30);
}
div#foo>div {
color: black;
opacity:1;
filter: alpha(opacity = 100);
}
</style>
<div id="foo">
<div>Lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>
In the above example, the opacity of div#foo is inherited by child elements, causing the text to become nearly unreadable. I suppose it's wrong to say it is inherited, the opacity is applied to the parent div and the children are part of that, so attempting to override it for the child elements doesn't work because technically they are opaque.
I typically just use an alpha png background image in such cases, but today i'm wondering if there's a better way to make a background of a div semi-transparent without affecting the contents.
You may use rgba().
div#foo
{
background: rgba(0, 0, 255, 0.3);
}
To make it work in old Internet Explorers use CSS PIE. There are some limitations, but those are handled in a backwards compatible way: the RGB value will be rendered correctly and the opacity will be ignored.
The best way is setting transparent png to background..
If you use opacity, you'd have to put them in separate DIV's and then line them up together. The background DIV would have the lower opacity, and foreground DIV would have your content with 100% opacity.
Related
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
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.
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.
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.
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;
}
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.
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;}
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.
I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?
If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater
The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.
You should try just a simple css background property.
.navbar
{
background-color: transparent;
}
I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.
its as simple as this
background: none;
I have a div in which there is an a tag.
I gave opacity:0.5 to the div then the text inside opacity is also 0.5
I don't want to use background image, then how can I have a text with opacity:1 inside my div with opacity:0.5 ??
Set the background color of the parent using rgba (includes alpha transparency). Example:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}
This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}
If you want to use a background-image, just set the opacity on the image itself (use a PNG).
You can't. The real child opacity can't be greater than its parent's opacity in the HTML rendering model.
From the documentation (emphasis mine) :
Opacity can be thought of as a postprocessing operation. Conceptually,
after the element (including its descendants) is rendered into an RGBA
offscreen image, the opacity setting specifies how to blend the
offscreen rendering into the current composite rendering.
You must put your child div outside the parent div. This is usually achieved using a different kind of positioning than the static one.
Use a totally different <div> for the text.
<div id="parentDiv">
<div id="mainDiv">
</div>
<div id="childDiv">
Hello
</div>
</div>
CSS
#parentDiv
{
position:relative;
}
#childDiv
{
position:absolute;
top:45px;
left:45px;
opacity:1;
}
#mainDiv
{
width:100px;
height:100px;
opacity:0.5;
}
Check it out : http://jsfiddle.net/AliBassam/aH9HC/ I added background colors so you can notice the result.
Since I'm forcing you to use absolute, I don't want you to have a problem with positioning the text, so make some mathematical calculations to get the best position:
top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
The a tag takes opacity from parent div. You can use the rgba CSS property on div rgba(0, 0, 0, 0.5) and again on a tag rgba(255, 0, 0, 1.0).
Like the answer above states, you'd need a separate div for the text, absolutely positioned to fit over the opaque div. You might want to set the z-index to something high as well.
Warning: this solution will work only if you want outer element to be completely transparent.
Instead of opacity: 0 and opacity: 1 use visibility: hidden and visibility: visible
Worked in my case (may not work in yours but it's worth the shot) :)
I'm trying to have a container element faded using:
zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=14)"; /*IE 8,9*/
filter: alpha(opacity=14); /*IE 5,6,7*/
opacity: .14; /* Good Browsers */
Within this container, I have children elements that are positioned relative with position absolute children in those. IE 8 and below have determined that these elements shouldn't listen to the transparency and should show at full opacity.
Is there any way to make IE respect the transparency of the positioned elements they should have? These elements fade in/out and have effects on them, so I'd like to avoid having numerous IE hacks everywhere in javascript, and if I duplicate the transparency in CSS on them other browsers will fade them again, making them almost invisible.
There are comments on JQuery's .fadeTo() method page that reference this bug. Unfortunately, there also doesn't seem to be any fix at the moment other than to apply the fading to each absolutely positioned element instead of the parent.
Try this technique, it's pretty cool. I've used this style:
.alpha80 {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.8);
background: transparent !ie;
zoom:1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff,endColorstr=#CCffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff, endColorstr=#CCffffff)";
}
And then for your HTML:
<div class="alpha80">
<!--your content-->
</div>
What I am trying to do is to show both background-color and background-image, so that half of my div will cover the right shadow background image, and the other left part will cover the background color.
But when I use background-image, the color disappears.
It's perfectly possible to use both a color and an image as background for an element.
You set the background-color and background-image styles. If the image is smaller than the element, you need to use the background-position style to place it to the right, and to keep it from repeating and covering the entire background you use the background-repeat style:
background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;
Or using the composite style background:
background: green url(images/shadow.gif) right no-repeat;
If you use the composite style background to set both separately, only the last one will be used, that's one possible reason why your color is not visible:
background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;
There is no way to specifically limit the background image to cover only part of the element, so you have to make sure that the image is smaller than the element, or that it has any transparent areas, for the background color to be visible.
To tint an image, you can use CSS3 background to stack images and a linear-gradient. In the example below, I use a linear-gradient with no actual gradient. The browser treats gradients as images (I think it actually generates a bitmap and overlays it) and thus, is actually stacking multiple images.
background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;
Will yield a graph-paper with light blue tint, if you had the png. Note that the stacking order might work in reverse to your mental model, with the first item being on top.
Excellent documentation by Mozilla, here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
Tool for building the gradients:
http://www.colorzilla.com/gradient-editor/
Note - doesn't work in IE11! I'll post an update when I find out why, since its supposed to.
use
background:red url(../images/samle.jpg) no-repeat left top;
And to add to this answer, make sure the image itself has a transparent background.
Actually there is a way you can use a background color with a background image. In this case, the background part will be filled with that specified color instead of a white/transparent one.
In order to achieve that, you need to set the background property like this:
.bg-image-with-color {
background: url("example.png") no-repeat, #ff0000;
}
Note the comma and the color code after no-repeat; this sets the background color you wish.
I discovered this in this YouTube video, however I'm not affiliated with that channel or video in any means.
Here's an example of using background-image and background-color together:
.box {
background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
width: 100px;
height: 100px;
margin: 10px 0 0 10px;
display: inline-block;
}
<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>
Make half of the image transparent so the background colour is seen through it.
Else simply add another div taking up 50% up the container div and float it either left or right. Then apply either the image or the colour to it.
Gecko has a weird bug where setting the background-color for the html selector will cover up the background-image of the body element even though the body element in effect has a greater z-index and you should be able to see the body's background-image along with the html background-color based purely on simple logic.
Gecko Bug
Avoid the following...
html {background-color: #fff;}
body {background-image: url(example.png);}
Work Around
body {background-color: #fff; background-image: url(example.png);}
Hello everyone I tried another way to combine background-image and background-color together:
HTML
<article><canvas id="color"></canvas></article>
CSS
article {
height: 490px;
background: url("Your IMAGE") no-repeat center cover;
opacity:1;
}
canvas{
width: 100%;
height: 490px;
opacity: 0.9;
}
JAVASCRIPT
window.onload = init();
var canvas, ctx;
function init(){
canvas = document.getElementeById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillstyle = '#00833d';
ctx.fillRect(0,0,490,490);ctx.restore();
}
Please let me know if it worked for you
Thanks
background:url(directoryName/imageName.extention) bottom left no-repeat;
background-color: red;