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);
Related
I've a div with transparent background, this is rendered with a black background when I use, https://www.npmjs.com/package/react-responsive-carousel
How can I modify the CSS to remove the black background?
You should overwrite the css like this:
<!-- add a outer class to parent div -->
<div className="carousel-outer">
<Carousel ...>
</div>
And add these code to css like below:
.carousel-outer .carousel .slide {
background: none;
}
Specially designated css has priority over others.
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 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 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 have a webpage that is styled using CSS
The contents of the web page are contained within DIVs.
Example:
<div id="container">
<div id="ticker">
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I want a background on the container div that will show as a semi transparent background (in a desired color), and then all the contents inside the div to appear normally without transparency.
I have tried methods including apply a opacity to the parent div, but it applies it to all the child divs which I do not want.
How do I do this?
Use a 1x1 background image (a png) at whatever transparency of whatever color you'd like and let it repeat.
You could use an rgba value for your background color instead and set the alpha value to your desired opacity level:
background-color:rgba(255,255,255,0.125);
http://www.w3schools.com/cssref/css_colors_legal.asp
you can use rgba value for this. Write like this:
#container{
background:rgba(0,0,0,0.5)
}
For IE there filter for this like this:
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
You can generator your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/