+ 2
how to apply background image opacity?
i want to make background lighter.
13 Antworten
+ 5
.class {
opacity: 0.6;
}
+ 3
.class {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.class:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('images/background.png');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
+ 1
jack i tried as u said n d result is whole elements are affected
+ 1
To solve the problem try rgba system it awesome in css3 or you go search it on w3 school am sure you will find that you are looking for as you can use it to affect only the part that u need to not like opacity which affects everything at once.
+ 1
To solve the problem try rgba system it awesome in css3 or you go search it on w3 school am sure you will find that you are looking for as you can use it to affect only the part that u need to not like opacity which affects everything at once.
0
opacity tag.
default value is 1
you can detract and increase.
0
ty driss
0
the same thing happen to me?
0
I be try many time but I could nt
0
need some one to get deep into this css3 finding it a bit had to understand
0
try opacity property
elements {
opacity:numeric value from 0 to 1.
}
0
Rupali do it as
background: rgb(255,255,0,0.6);
There is another way..
<div class="backgroundimg">
</div>
<style>
.backgroundimg
{
position: absolute;
background-image: -webkit-linear
-webkit-linear-gradient( 0deg
}
</style>
Hope This one will help you..
- 1
https://code.sololearn.com/W2fzI2WhflM6/?ref=app
your background tag shouldn't wrap other elements tag . it will be effects by opacity
to prevent other elements effects by opacity, put your background elements tag out of body tag