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
Related
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
I am using the carousel component from bootstrap and also want to use the CSS blend-mode background-blend-mode: multiply; for the caption.
Unfortunately, the blend mode doesn't work.
The code is the following:
<div class="carousel-inner" role="listbox">
<div class="item">
<div class="carousel-caption">
CAPTION CONTENT
</div>
<img src="imgage.png" class="img-responsive" />
</div>
</div>
The CSS is the following:
.carousel-caption {
background-color: rgba(0, 119, 137, 0.7);
background-blend-mode: multiply;
}
Is this the wrong way?
If you want to blend an element over another, the property that you should use is mix-blend-mode.
It has the same syntax that background-blend-mode, but this one applies only to the in-element backgrounds (as M.Doye says)
You would need to assign the background-image property to same selector that you assigning background-blend-mode. So this may not work in your case.
From the Docs
The background-blend-mode CSS property describes how the element's
background images should blend with each other and the element's
background color.
Syntax Example:
.blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
}
Along with multiply you can also use: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal
Source
In order for your code to work, you need to add a background image to the element. So your code should look like this:
.carousel-caption {
background-image: url('image.png');
background-color: rgba(0, 119, 137, 0.7);
background-blend-mode: multiply;
}
There is a great article here you can check out, that gives a further explanation of the blend mode property.
I tried webfilters to change the white background of this image looking at this:
Change color of PNG image via CSS?
Not sure if this is the way to change the whitebackground of this image:
http://i.stack.imgur.com/AZRrE.png
Is it possible to change this through css?
You need to use a png that has a transparent background - the one you are using has a white background. For example.
.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
<div class="red"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="blue"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="green"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
If you do a search for radio button png you should be able to find a better one than the one I have used (as mine has some rough edges that are showing up)
Is it possible to change this through css?
No. If the image had some transparency, you could change the background-color (and/or background-image) of its parent element, like so:
<span class="thing"><img src="your-semi-transparent-image.png"></span>
And in the CSS:
.thing {
background-color: aqua;
/* This will show through the transparent region of the image */
}
I'm trying to display
a variable width popup
that will have rounded corners with transparent edges to match the background color.
First I thought it was a simple rounded corner markup, but then the problem was with transparent background for the radius and the variable width of the popup.
<css>
.c-dialog-rc-tl, .c-dialog-rc-tc, .c-dialog-rc-tr,
.c-dialog-rc-bl, .c-dialog-rc-bc, .c-dialog-rc-br {
background-color: none;
height: 10px;
}
.c-dialog-rc-tl, .c-dialog-rc-bl {
float:left;
width:20px;
}
.c-dialog-rc-tl {
background-position: 0 -30px;
z-index:1005;
position:absolute;
}
.c-dialog-rc-bl {
background-position: 0 -43px;
z-index:1004;
position:absolute;
}
</css>
<div class="c-dialog-rc-top">
<div class="c-dialog-image c-dialog-rc-tl"></div>
<div class="c-dialog-image c-dialog-rc-tc"></div>
<div class="c-dialog-image c-dialog-rc-tr"></div>
</div>
I tried the replies of this answer but didn't work.
Please see the code at jsfiddle.
I'll try to provide as much as information if the question is not clear but please don't downvote or delete the question.
Has anybody solved this kind of problem, or know a better div layout or a css that will render such a requirement ?
Thanks in advance.
Changing the order of the rounded corners worked and with a little bit of change in css.
<div class="c-dialog-rc-top">
<div class="c-dialog-image c-dialog-rc-tl"></div>
<div class="c-dialog-image c-dialog-rc-tr"></div>
<div class="c-dialog-image c-dialog-rc-tc"></div>
</div>
<style>
/* explaining here in short, please refer fiddle for full css */
.c-dialog-rc-tl {float:left;}
.c-dialog-rc-tr {float:right;}
.c-dialog-rc-tc {overflow:auto}
</style>
Link to updated fiddle : http://fiddle.jshell.net/zMtg7/5/
With CSS, I'd like to set a background transparent after a colour already being set by its parent div.
HTML
<div id="content">
<div id="nobackground">This background is transparent</div>
<div>This is not transparent</div>
</div>
CSS
html,body{
background-image:url("http://www.thomaslovgren.com/wp-content/uploads/spaceship1.png");
}
#content{
background-color:#F00;
}
#nobackground{
background-color:transparent;
}
http://jsfiddle.net/7HfJa/1/
A possible solution:
#content{
}
#content div:not(#nobackground){
background-color:#F00;
http://jsfiddle.net/7HfJa/4/
But, is there any better good-looking solution like a single statement to the div like background-color:transparent?
I suppose you could do: http://jsfiddle.net/8c54H/
div#nobackground ~ div {
background-color: #ff0000;
}
although that assumes the red divs follow the transparent div
Make your selector more specific:
#content #nobackground {
background-color:transparent;
}
You can't really do what you want properly with the HTML that you have. You can't have something within a content box show the background from something behind that box without redeclaring the same background.
Better would be to just move the HTML around so that the "transparent" element is simply in a container with no background.
If you want to fake it with the HTML you have, you could try something like this:
http://jsfiddle.net/PxKy8/2/
It just puts a border around the content and a background on the elements that actually need it.
#content{
border:5px solid #F00;
}
#nobackground {
}
.redbg {
background-color:#F00;
}
and the HTML
<div id="content">
<div id="nobackground">This background is transparent</div>
<div class="redbg">This is not transparent</div>
</div>
EDIT: What are you trying to accomplish? If you want it to look like your last example, why not this:
http://jsfiddle.net/f4qZP/