I've noticed that when using mix-blend-mode the result is different than when using background-blend-mode even though you're using the same blending mode.
For example, compare the 2 results below:
I've copied in my setup and JSFiddles below:
HTML
<div class="background">
<div class="overlay"></div>
</div>
CSS
.background{
width:200px;
height:200px;
//background-color:green; //toggle depending on what you want to use
background-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
.overlay{
width:100%;
height:100%;
background-color:green; //toggle depending on what you want to use
mix-blend-mode:soft-light;
}
JSFiddle
Using mix-blend-mode: https://jsfiddle.net/p8gkna87/
Using background-blend-mode: https://jsfiddle.net/p8gkna87/1/
Some background information
I'm currently replicating a photoshop design which uses the soft-light blending mode and at the same time also uses an opacity of 51%. So it wouldn't be able to use background-blend-mode as the opacity cannot be applied to the same object.
background-blend-mode blends with its background-image and its background-color.
mix-blend-mode blends with its backdrop, the part what is behind itself, and its background-color.
Here is an article describing mix-blend-mode quite well:
http://alistapart.com/article/blending-modes-demystified
Put in another way, and in your case, with your mix-blend-mode you blend a green color on top of the image, with your background-blend-mode you do the opposite.
So by having the same layer order, both blend-modes look the same
.background,
.background2{
display: inline-block;
}
.background{
width:200px;
height:200px;
background-color:green;
}
.overlay{
width:100%;
height:100%;
mix-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
.background2{
width:200px;
height:200px;
background-color:green;
background-blend-mode:soft-light;
background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
background-size:cover;
}
<div class="background">
<div class="overlay"></div>
</div>
<div class="background2">
</div>
You have already a good answer from LGSon.
Just to clarify it a little bit further:
The layers that you have here are, from botton to top:
background element background-color
background element image
overlay element background-color
The background-blendmode applies inside the background element, in this case layer 2 over layer 1
The mix-blend-mode applies element 3 over the result of 1 + 2
So, if only one of them is efffective, the order is the inverse
it looks like to me that mix-blend-mode also uses background-color to blend it when background-blend-mode doesn't.
test using and change background-color as well:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-blend-mode
Related
I'm struggling to find a solution about achieving this particular effect:
The tricky part is that I need the circle and the rectangle to be 2 separate elements because they will contain child nodes.
I've tried various ways, including borders with transparent colors, shape- properties, element positioning trickery etc. Unfortunately, none of my trials yielded even at least approximate results. I just can't seem to be able to wrap my head around this and I can't find any examples on the web as well. The closest I got to was this thread.
Any help would be much appreciated. Thanks!
Using radial-gradient you can easily do this:
.rect {
margin-top:50px;
height:120px;
background:radial-gradient(circle at center,transparent 100px, green 100.5px);
}
.circle {
margin:-150px auto 0;
width:180px;
height:180px;
background:green;
border-radius:50%;
}
html {
background:linear-gradient(to right,pink,white);
height:100%
}
<div class="rect">
</div>
<div class="circle">
</div>
I'm using background and background-color to style the background with a gradient.
If I write only background I can see the gradient:
background: linear-gradient(35deg, #CCFFFF,#FFCCCC);
but if I write background-color I can't see it:
background-color:linear-gradient(35deg, #CCFFFF,#FFCCCC);
What could be the problem?
Because gradient kind of background isn't a color, but an image.
See the example bellow: https://jsfiddle.net/jpavnk71/4/
HTML:
<div class="color">background-color:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
<div class="wrong">background:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
<div class="image">background-image:linear-gradient(35deg, #CCFFFF,#FFCCCC);</div>
CSS:
div{
height:100px;
line-height:100px
}
.wrong{background:linear-gradient(35deg,#CCFFFF,#FFCCCC);}
.color{background-color:linear-gradient(35deg,#CCFFFF,#FFCCCC);}
.image{background-image:linear-gradient(35deg,#FFCCCC,#CCFFFF);}
Linear-gradient is handled like an image so you can write:
background:linear-gradient(35deg, #CCFFFF,#FFCCCC);
OR
background-image:linear-gradient(35deg, #CCFFFF,#FFCCCC);
I am trying to achieve the effect of having my text solid, nothing shows through, but the background color of the element holding the text, to be with opacity (o.5 for example).
I am currently do it with one element on top of the other.
Am wondering if there is a way to do it with only one element.
<div class="body">
here be a background image
<div class="title"> TITLE WITH FAINT WHITE BACKGROUND</div>
</div>
You can use rgba to define the color which supports alpha.
.title{
color:black;
background-color:rgba(255,255,255,0.5);
}
Support for this feature: http://caniuse.com/#search=rgba
Full sample
.body{
height:200px;
width:100%;
background:url('http://lorempixel.com/500/200/abstract/1');
}
.title{
color:black;
background-color:rgba(255,255,255,0.5);
}
<div class="body">
<div class="title">TITLE WITH FAINT WHITE BACKGROUND</div>
</div>
To achieve this in a single element, you need to set the rgba color as the first image, so that it will be rendered above.
And this makes impossible to set it as color, you need an image.
The 2 posibilities to achieve this are image() and linear-gradient:
.test {
background-image: image(rgba(0,0,255,.5)), url("http://placekitten.com/800/600");
}
.test {
background-image: linear-gradient(0deg, rgba(255,255,255,.5), rgba(255,255,255,.5)), url("http://placekitten.com/1000/800");
}
<div class="test">TEST</div>
However, the first one is valid CSS as the spec, but as far as I know it is not supported by any browser
w3c reference
I want to have a solid background color and have a gradient on top of it with a certain opacity. This way it seems one background color with the effect of a gradient on top of it.
This is my html:
<article>
<a href="" class="article">
<h2>Title<i></i></h2>
<img src="images/media-examples/pic1.jpg">
</a>
</article>
I want to apply this to the header to create something like this:
Judging by the example, you don't want a gradient. You simply want a overlying element with Opacity. So
HTML
<div id="element">
<div id="overlay">
<h2>H2 Title</h2>
</div>
</div>
CSS
#element {background:url('image.jpg');}
#overlay {background:rgba(0, 0, 0, 0.5);}
I won't go in to much more detail as it seams you are wanting a tutorial and really you need to try it, then ask for help when it goes wrong. Try searching the internet, there will be plenty of tutorials on the net.
Update
To use your existing HTML try applying this CSS
article {width:300px;}
article img {position:fixed; top:0; border:3px solid #253d8e; z-index:99;}
article h2 {z-index:999; position:fixed; top:0; color:#fff; background:rgba(0, 0, 0, 0.5); width:290px; display:inline-block;margin:0; padding-top:10px; padding-bottom:10px; padding-left:10px;}
You will need to update this to suit your needs but should give you an idea. See it working here on jsfiddle
I would add another element over the image that has a background with opacity ... this way you can easily control all attributes.
You could also apply two backgrounds to the same element or use pseudo elements
like here: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Edit: Sorry, Tim was just a tiny bit faster with the same but more detailed overlay element answer =)
But now I just want some credit for the other two suggestions ;-)
Want to reduce the opacity of page contents container background without reducing the opacity of the contents.
<div id="container">
<div id="page contents">
page contents goes here, like amazing articles and all that.
</div>
</div>
Needs to be able to expand with the content, thus can't have a fixed height.
Absolute positioning it underneath the content will mean there will be no relationship between the two divs and it wont expand with the contents, so I think this is a dead end, feel free to say otherwise.
Can't use Jquery as could be too laggy and not instant. Other options preferred please.
May have to use 'png' background images but were hoping not to as it is a template and needs to be able to change colour based on colour schemes.
Could generate images on demand but not ideal.
Oh and to top it off cant use CSS3 as wont work in IE! of course!
Any suggestions?
My first impulse is a transparent PNG.
But looking further and especially with your comment on variable colour schemes, perhaps hooking into RGBA support would work for you. There's a nice post on it (including how to hack around IE - which doesn't support it at all) here:
http://css-tricks.com/rgba-browser-support/
not tested yet, but you get the idea.
<div id="container">
<div id="page contents">
<div id="opacity"></div>
page contents goes here, like amazing articles and all that.
</div>
</div>
#page {
position:relative;
}
#opacity {
position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}
All content of an element will receive it's opacity value, even if you set the content's opacity to 0, you'll stile have the problem... here's a simple solution that I use:
HTML
<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
<span class="menu_title2">MENU PRINCIPAL</span>
<div id="menu_opts">
<ul id="menu">
<li id="menu_home">HomePage</li>
<li id="menu_home">Company</li>
</ul>
</div>
</div>
The CSS:
div#menu_bg {
position:fixed; top:10px; left:10px; z-index:20000;
width:200px; height:50px;
background:#000000;
/* for IE */ filter:alpha(opacity=60);
/*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
position:fixed; top:10px; left:10px; z-index:20001;
width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
position:absolute; top:60px; left:10px;
width:200px; height:275px; overflow:hidden;
}
The trick is simple, have a div behind you content and use position and z-index to place it. Then draw another div with the content, over the last one, and use same position but set z-index above. This way, you'll have a background with the desired opacity, and your content since it's on another div, will get just right!