I have a scenario where I need a transparent background image but I have no control over the dynamically generated images I use. For that reason Transparent PNG is out of the question. All child elements within the same div should NOT be effected and should be fully visible.
I know how to apply transparency to background colours and block level elements but can you do this for a background image?
Setting the opacity of the element with the background is a good start, but you'll see that any elements within the one whose opacity is changed will also be transparent.
The way around that is to have an element that contains the background and is transparent (opacity:0.6; filter:alpha(opacity=60)), and then float or position the container with the actual content over it.
Here's a sample of how this approach would work:
#container {
width: 200px;
postiion: relative;
}
#semitrans {
width: 100%; height: 100px;
background: #f00;
opacity: 0.6;
filter:alpha(opacity=60);
}
#hello {
width: 100%; height: 100px;
position: absolute;
top: 20px; left: 20px;
}
<div id="container">
<div id="semitrans"></div>
<p id="hello">Hello World</p>
</div>
No. Not technically. You'd have to apply a background-color in order to get this to work because you'd be fading the color and image, rather than just the image. Remember that a background image is not styleable content.
You could probably hack it by using an image instead of a background image and there a mixture of relative and absolute positioning with some z-indexing on top. But that's the only way I can think of!
IE uses filter:alpha(opacity=50); while others use opacity:.5
Just include them both.
Related
When two opaque elements overlap, the opacities combine. Can I tell CSS to make the overlap a different color? For example, can I have two yellow elements that overlap and turn them orange in the middle?
Currently, you can't via pure CSS. There is a CSS property that emulates Photoshop blending modes mix-blend-mode, which isn't really supported widely yet. Although the blending mode still depends on the elements' colors and you can't specify the color for the overlapping sections.
div {
height: 100px;
mix-blend-mode: multiply;
position: absolute;
width: 200px;
}
.left {
background: cyan;
left: 0;
}
.right {
background: yellow;
left: 150px;
}
<div class="left"></div>
<div class="right"></div>
Purely via css, I think not possible. Please try this answer,
How to make an transparent element overlap other elements?
https://css-tricks.com/equidistant-objects-with-css/
You can give css at runtime via js too or you create a css class with element: first or last as second link suggested.
I want to change my div background color and image on hover. Just like this.
I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation?
<div class="col-md-4">
<div class="icon-wrapper"></div>
<p>Products</p>
</div>
.icon-wrapper {
background: url("/assets/human-resources.png");
display: inline-block;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #ddd;
height: 120px;
position: relative;
width: 120px;
border-radius: 50%;
transition: all 0.2s;
img {
top: 22%;
left: 24%;
position: absolute;
}
&:hover {
background: blue;
background-position: center;
background-repeat: no-repeat;
background: url("/assets/car-white.png");
}
}
background-color: #6DB3F2;
background-image: url('images/checked.png');
you could try to use this instead
background: #6DB3F2 url('images/checked.png');
I don't know all layout of your website but I can tell you a short introduction to popups - how to create them in right way.
At first, outside all other div blocks create another one for background mask (between last div block element in html and closing body tag) - it will be used only as background layer (with absolute position), style as you wish and set display none to hide it.
Then create another div block for popup (not inside background block but under it, position fixed to scroll with your page), create popup and style how you want, hide it as well (display none).
This will give you reusable popup structure that you will be able to use how many times you need afterwards just adding new popup block under first one etc.
I know it is just a theory without real life examples, so you can study a bit here (about structure, jQuery can be used in more easy way):
Reusable modal popups
P.S. Answer to your question:
You need to change background-color and background-image (on hover state). :)
In my understanding you are trying to change the background image and the background color on hover, right?
Try this:
yourElement:hover{
background-color: yellow;
background-image: url(../images/bg.gif);
}
Example 1 : Table row background color change
<table>
<tr bgcolor="#777777">
<td>Content Write here...</td>
</tr>
</table>
Example 2 : If change background image then use this code
<div style="background-image: url('bg.jpg');"></div>
Because you are overriding background on hover selector thats normal situation. Try background-color:blue; on hover selector
Is it possible to apply a css blend mode to an element in a different div?
E.g, I have a large background hero image in one div. Above that image (in a different div) I have a blue semi-transparent box with text in it. This transparent box is what I would like to apply a blend to, but it seems to not work perhaps because they are not in the same div, like in the example https://css-tricks.com/basics-css-blend-modes/
I am working in wordpress, so it will be a bit hard to re-structure the HTML in order to put the image and the colored box in the same div.
Does anybody know of a trick I can use to achieve this method?
Thanks in advance!
Use mix-blend-mode.
DEMO:
http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview
There are two ways to use blend-modes:
background-blend-mode: If both the background are in same div, then this property can be used.
mix-blend-mode: When you want to blend background of 2 different elements, then you can use the mix-blend-mode property.
code:
HTML:
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
CSS:
div.wrapper {
position: relative;
}
div.first,
div.second {
width: 300px;
height: 200px;
position: absolute;
}
div.first {
background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
z-index: 9;
top: 0px;
left: 0px;
}
div.second {
background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
z-index: 10;
mix-blend-mode: difference;
top: 30px;
left: 120px;
}
Here is a trick:
you can add both divs in a single div.
Then in css You can add the two backgrounds for a single div. This way, you can use the background-blend-mode property to blend the two images.
Here's an example: https://jsfiddle.net/4mgt8occ/3/
You can use :after or :before to create another element in the img-div. Then set the background color with rgba(). The 0.2 here is the opacity of the background color. For the text div, you don't have to do anything about it.
div#wrapper::after {
background-color: rgba(216, 223, 228, 0.2);
display: block;
width: 100%;
height: 100%;
content: ' ';
}
I need to make white stripes on an image Like this on header image there are children's and there is some white stripe. same white stripes can be show on below sustainability report image.Although they are using image which had these stripes. Any idea how it can be implement in css or css3 with any image.
This or some variant of it ought to work:
HTML:
<div class="image"><img src="whatever-you-like.gif"><div></div></div>
CSS:
.image { position: relative; }
.image div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(stripes.png); }
Stripes.png must be a 24-bit PNG image with a low alpha value.
Note that in this implementation you don't have to use your original image as a CSS background, you can use the image tag as normal (just with some extra HTML around it).
You can use your original image as a background, and on top of it use .png image with these stipes and transparency.
Ok, so in my page I am showing a background image with this css:
.heroarea {
background:url(/static/images/mrd_hero_01.jpg) no-repeat;
height:450px;
}
and the copy placed over it and the container the copy is in have these styles:
.main-panel {
position: absolute;
top: 130px;
left: 380px;
background: #fff;
width: 560px;
height: 340px;
padding: 30px 30px 20px 30px;
/* CSS3 standard */
opacity:0.5;
/* for IE */
filter:alpha(opacity=50);
}
.main-panel h1 {
background: transparent;
color:#39372f;
text-align: center;
/* CSS3 standard */
opacity:1;
/* for IE */
filter:alpha(opacity=100);
}
Generally, everything is as expected. That is, the image shows where I expect it to show. main-panel shows a white back ground with a transparent background. However, the text in the h1 tag is also transparent. I can see the image from underneath showing through. How can I make this so that the h1 tag content is not opaque?
Thanks!
Opacity applies to the element, not it's background.
You either need to use a translucent image, or an rgba background colour.
There is an explanation about how to do this in a backwards compatible way. (Disclosure: My site)
Use rgba and/or transparent png. Alternatively, move the content to a separate sibling div as the background:
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
If you use transparency on a block element it makes the child element inside transparent as well.This is how css works ! I do not think there is any way to hack out of it. What you can do it to absolutely position h1 without making it a child or use a translucent image
It looks like your text is a child of .main-panel. It will take on 50% opacity. Even though you state the text is opacity 100% will only make it 100% of 50%. You will need to layer it outside of .main-panel and place it on top.
You have to move it outside of its .main-panel parent. There's no way to override the 50% opacity that's being applied there.
Alternatively, if you're only using 50% opacity to make the mrd_hero_01.jpg background image transparent, you could convert it to a .png with 50% opacity and then you wouldn't need to set the opacity on .main-panel.