Is there any way to darken a .png image? I have one as a background image, but it does not cover the whole container, if I set overlay to darken it.
.overlay {
background-color: #322D36 ;
bottom: 0;
left: 0;
opacity: 0.5;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
It's also visible outside of the image space. Is there any way how to darken only image?
demo
You could use the (not super supported) filter property like so.
filter: brightness(0.4);
Some prefixes such as -webkit- may be needed.
Here's a fiddle.
EDIT because of comment:
Make the container the width and height of your image, then add the image using the before pseudo class.
.container {
position: relative;
width: ###;
height: ###;
}
.container:before {
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
position: absolute;
z-index: 1;
background-image: some-url;
-webkit-filter: brightness(0.4);
}
.content {
position: relative;
z-index: 10;
}
Put all your text in the .content div.
You can use a linear-gradient to your background.
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7) ), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");
Updated JSFiddle.
Here another JSFiddle in which you can see that only the background will be dark and the rest of elements will be normal.
you can using background-color after background-image property, and using background-blend-mode property for overlay the background-image. Here is the example
https://codepen.io/anon/pen/PQOejG?editors=1100
Related
I'm trying to set up two types of slides in Revolution slider. There will be the main background image for the slide, then a semi-opaque layer taking up 40% of the left side or the right side of the slide, with a text layer above that. I have the following css that can achieve the semi-opaque layer for one side (right or left, in the case below, left side) using the 'after' psuedo selector:
.rev_slider .slotholder:after{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}'
This takes care of the one side of the transparency but not the other, so I need a slide-specific class which adds a "left" or "right" property to the parent .slotholder class. Any suggestions?
you can try to use also :before for the right side, please try use this css
.rev_slider .slotholder:after, .rev_slider .slotholder:before{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
.rev_slider .slotholder:before{
right: 0;
}
.rev_slider .slotholder:after{
left: 0;
}
In the "Link & Seo" section, there is a field to add a class to the <li> of the slide - You can add a class (e.g. "right-text", "left-text") and apply the appropriate css rule, e.g.
left-text .slotholder:after{
width: 40%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
I have a background image for the wrapper div of a page. I want the image to be 0.5 opaque. My problem is that all other items inside the div also become 0.5 opaque. How can this be avoided?
#detailswrapper
{
background-size:cover;
background-repeat: no-repeat;
opacity:0.5;
}
you can use something like this
JS Fiddle
div::after {
content:"";
background: url('http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
I've got a strange one. I use this same bit of code all over my site, and it works everywhere. For some reason, it simply wont work here.
Basically what I am doing is creating a translucent background image by using pseudo elements :before and :afterto fill the entire container with a background color (:before) and a semi-transparent image (:after). The :before element works just fine, it fills the height and width of the .dashboard-page as expected. The :after element has 100% width, but a height of 0, so the image is not showing up. Help would be much appreciated.
.dashboard-page {
width: 100%;
position: relative;
z-index: 1;
#include clearfix;
&:before,
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
#include transition($transition-main);
}
&:before {
z-index: -2;
background-color: $blue-light;
}
&:after {
opacity: 0.02;
z-index: -1;
background-image: url('../life/assets/img/pattern.png');
}
}
Try adding display: block; to :after.
By default pseudo elements are inline boxes
Not sure if there's an trick to do this but I am looking for a way to basically use CSS to repeat a background image(repeat-y) to a certain point at the bottom of the element like 80 px.
I really hope there an way to do this.
.rep-img {
background-position: center left;
background-repeat: repeat-y;
background-image: url('../images/image.png');
background-repeat-y-stop: 80px; /* made up property */
}
Put the background on a pseudo element:
.rep-img {
position: relative;
}
.rep-img:before {
content: '';
background: url('../images/image.png');
position: absolute;
top: 0; right: 0; left: 0;
bottom: 80px;
z-index: -1; /* to push it behind any content in .rep-img */
}
Here's the fiddle: http://jsfiddle.net/T7JBx/
I'm struggling to make this render right in my browser (Chrome). I have a wrapper holding all the elements of the HTML, and I want to have a DIV (lets call it div-1) that hold a image, and has a overlay div on top of it to the left, like I sketched in this picture...any quick solutions?
Here's a pure CSS solution, similar to DarkBee's answer, but without the need for an extra .wrapper div:
.dimmed {
position: relative;
}
.dimmed:after {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
I'm using rgba here, but of course you can use other transparency methods if you like.
Using CSS3 you don't need to make your own image with the transparency.
Just have a div with the following
position:absolute;
left:0;
background: rgba(255,255,255,.5);
The last parameter in background (.5) is the level of transparency (a higher number is more opaque).
Example Fiddle
.foo {
position : relative;
}
.foo .wrapper {
background-image : url('semi-trans.png');
z-index : 10;
position : absolute;
top : 0;
left : 0;
}
<div class="foo">
<img src="example.png" />
<div class="wrapper"> </div>
</div>
For a div-Element you could just set the opacity via a class to enable or disable the effect.
.mute-all {
opacity: 0.4;
}
Like the answer previous, but I'd put ::before, just for stacking purposes. If you want to include text over the overlay (a common use case), using ::before will should fix that.
.dimmed {
position: relative;
}
.dimmed:before {
content: " ";
z-index: 10;
display: block;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}