I would like to have a background image, from a URL (So I can't edit its opacity manually)
with an low opacity and write content on top of it:
but the content should be with the normal 1 opacity
http://jsfiddle.net/ca11111/BAJN5/
edit: http://jsfiddle.net/ca11111/BAJN5/1/ slightly better
The opacity property is inherited. If you set opacity < 1 for an element, all its child elements will also have that < 1 value for opacity and you cannot change this.
The easiest way to achieve what you want is to use multiple backgrounds and have a semi-transparent background on top of your image. Of course, this raises some browser compatibility problems (see multiple backgrounds support and gradient support).
Example here: http://dabblet.com/gist/2818293 (should work in IE10, Opera 11+ and every non-dinosaur version of other desktop browsers)
There is also the option of not setting the background on the parent, but on a child with no children of its own (or on a pseudo-element), that is absolutely positioned and has a z-index < than that of the parent (which has an rgba background).
You mean something like this? http://jsfiddle.net/BAJN5/2/
Try setting it this way:
<div style="position:relative"> <!-- wrapper div (relative) -->
<div style="background:url(an-image-url) no-repeat center center; opacity:0.5; height:220px"></div> <!-- half opacity background -->
<span style="opacity:1; position:absolute; z-index:1"><!-- full opacity (absolute) -->
some text
......
</span>
</div>
see i have made through pseudo-elements :before & :after
HTML
<div class="addFav">
<div>asdfasfasfafs</div>
</div>
CSS
.addFav:before {
background:url(http://lorempixel.com/400/200/sports) no-repeat;
border:1px solid red;
height:200px;
width:400px;
color:#000;
padding:15px;
position:absolute;
content:"";
opacity:0.1;
}
.addFav {
height:200px;
width:400px;
color:red;
padding:15px;
position:relative
}
see the demo:- http://jsfiddle.net/8LFLd/66/
Updated Demo here http://jsfiddle.net/8LFLd/68/
This page shows a technique for emulating background image opacity using a psuedo element
Hey i think you should want this
Define your Main Div rgba properties
div {
background: rgba(200, 54, 54, 0.5);
}
more info http://css-tricks.com/rgba-browser-support/
Related
Example image demonstrating what I need
If you see the image above, There is a parent container that has a background image applied which is a gradient. It is divided into 2 subdivs stacked vertically. one of those divs contains a red div and a blue div that are absolutely positioned. The blue div is supposed to act like a mask that covers the contents only of subdiv2. It is anchored to something else in subdiv2 (not in image) so it moves if that "something" moves. If it happens to cover the red div, it's supposed to hide the red div while retaining the gradient background.Is there a way to achieve this using css ?
If the gradient didn't exist, One would inherit background color down the chain and the blue div would simply hide the red div. If you inherit the background-image, we get a split gradient in the 2 subdivs which is not correct. If we keep the backgrounds of the 2 subdivs transparent, I know of no way for the blue div to hide the red div.
Thanks!
EDIT : Sorry for not specifying earlier. My bad. I've changed the wording to ensure you guys understand the fact that the blue div doesn't ALWAYS cover the red div otherwise the solution would be simple.
You can check this example out.
You can use
background: inherit
on the blue div after setting the z-index of the red div as -1.
Using background inherit on the blue div will help it in not loosing transparency and will vanish the red div.
And using z-index:-1 on red div will push it behind the blue div.
If the parent div has background:transparent, it will give you the desired effect. The tough part is getting the parent "in front of" the child. I was able to do it by setting a negative z-index on the child, but you might require something else. Without seeing your markup I can't be sure.
document.getElementById('toggle').onclick = () => {
const inner = document.getElementById('inner');
const style = window.getComputedStyle(inner);
const index = style.getPropertyValue('z-index');
document.getElementById('inner').style.zIndex = index === "-1" ? "0" : "-1";
}
.bg {
width:600px;
height:400px;
background:url(http://placekitten.com/600/400);
}
.div1 {
height:200px;
border: 2px solid red;
}
.div2 {
position:relative;
}
.subdiv2 {
position:absolute;
left:40%;
top:80px;
height:80px;
width:200px;
border: 2px solid blue;
background:transparent;
}
#inner {
position:absolute;
top:10px;
left:80px;
width:60px;
height:60px;
background:red;
z-index:-1;
}
<div class="bg">
<div class="div1"></div>
<div class="div2">
<div class="subdiv2">
<div id="inner"></div>
</div>
</div>
</div>
<button id="toggle">toggle z-index</button>
z-index seems like a bad solution to this problem. You CAN animate the z-index value BUT it's still going to look kinda funny as the elements change depth and pass between each other.
If the goal is to visually "hide" content with its parent background, isn't transparency the same result? Or am I missing something about the goal?
I would suggest:
// hidden state
.redDiv {
opacity:0;
transition: opacity 0.5s linear;
}
// visible state
.redDiv.visibleState {
opacity:1;
}
You can do real masking in CSS but I tend to reserve that for complex shapes.
This question already has answers here:
CSS background-image-opacity?
(13 answers)
Closed 8 years ago.
I want know that "How can I change background image opacity without changing on div content?"
I searched too much & I don't find a good answer to solve this issue!
HTML
<div class="div-1">
<h2>title</h2>
<p>text</p></div>
CSS
.div{
position:relative;
width:200px;
height:200px;
float:left;
color:white;
background:#7a8586 url('url') no-repeat local right;
overflow:hidden;
text-align: justify;
font-family:arial;
font-size:14px;}
DEMO
You can use after or before pseudo element for background-image.
Css:
.has-bg-img{
position: relative;
}
.has-bg-img:after {
content:'';
background: url('http://placehold.it/500x100') no-repeat center center;
position: absolute;
top:0px;
left: 0px;
width:100%;
height:100%;
z-index:-1;
opacity: 0.2; /* Here is your opacity */
}
Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:
1. Use transparent background images (easiest imo)
Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).
2. Use positioning.
If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]
3. Use sibling elements in the same position
If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.
There are more, but one of those should get you what you want.
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
check how is done
http://css-tricks.com/snippets/css/transparent-background-images/
You can try this.....
<div style="position:relative; ">
<div style=" background-image:url(url); opacity:0.5;filter:alpha(opacity=40);height:520px; width:520px;"></div>
<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px;idth:500px;">
Your Div Contents are Here..................
</div>
</div>
I have a div position:absolute over a canvas tag. The div uses the hover pseudo class to set overflow:visible to create a simple popup-type effect. In Chrome, this works fine. In IE10, the hover pseudo class is only activated when I'm hovering over an element within the div or if I give the div a background-color.
Any help is appreciated!
looks like this can be fixed by using a transparent png as a background image.
EDIT: sorry, shouldve expanded on this more. in ie, if you use the pseudo class of :hover on an element that has a transparent background color, the hover is only triggered when the mouse is over a solid/nontransparent spot. this is usually not an issue unless you are doing something like this:
<style>
#content {
height:20px;
overflow:hidden;
position:absolute;
width:100px;
}
#content:hover {
height:100px;
overflow:visible;
}
#hoverContent {
position:absolute;
top:20px;
}
</style>
<div id="content">
<div style="float:left;">wtf</div>
<div style="float:right;">hrm</div>
<div id="hoverContent">lol</div>
</div>
in ie, if you hover over #content, only when the mouse is over 'wtf' or 'hrm' will the overflow content be visible. if you hover BETWEEN the words 'wtf' and 'hrm', youd expect that the hover styles would be applied too because that is part of #content but youd be wrong.
to fix this you can either apply a background color or image to #content.
A better solution is to use a transparent background color rather than an image:
background:rgba(0,0,0,0);
IE10 treats rgba() as a solid color.
Also one possibility is use of inline svg as the background img. You need only svg element with background 1x1 - no color.
Pros - No need of additional request
Cons - IE8 does not support svg
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%221%22+height%3D%221%22+viewBox%3D%220+0+1+1%22%3E%3Ctitle%3Etransparent+bcg%3C%2Ftitle%3E%3C%2Fsvg%3E");
background-repeat: repeat;
Sample is already encoded svg to work in all browsers
I have a CSS-element with opacity above a picture in the background.
Inside that element there is an image, that inherits the opacity, so the image is somewhat darker than it would be normal:
<body>
<div class="trans">
<img class="not_trans" src="test.png">
</div>
</body>
CSS:
body{
background:url(stars.gif);
background-color:black;
}
.trans{
opacity:0.4;
}
img.not_trans{
opacity:1.0;
}
But the image is still half transparent.
How can I achieve a normal non-transparent image without moving the img out of the div?
If there are a lot of elements cascaded with different background-colors, using
background-color:rgba(0,0,0,0.4) instead of opacity is not an easy option
I only want one img element not to inherit the transparency of the surrounding elements
At least there would be a solution with javascript:
move the img tag in the DOM out of the div
set a spacer there instead
position the img where it was with position:absolute
But is there a solution with CSS?
Use rgba on your .trans instead of opacity! Like rgba(0, 0, 0, 0.4); or whatever color you have.
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) :)