This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
CSS background-image-opacity?
(13 answers)
Closed 18 days ago.
my problem is the following: I have a div, that is just a background and has other tags inside. I apply the following background to the div:
background: linear-gradient(158.72deg, rgba(255, 255, 255, 0.4) 3.01%, rgba(255, 255, 255, 0) 103.3%);
I also need to apply to this div an opacity of 0.5. If I just add another line like this to the css file:
opacity: 0.5;
It will apply this opacity to all the elements inside but I don't wan't it.
Other questions suggest to apply rgba(0, 0, 0, 0.5) but I can't do that since I have a linear gradient in which there is already an opacity of some kind. What do I do?
P.S. this background and opacity are taken from figma template
I also had no luck with some online gradient generators.
You can wrap a div in another one and apply opacity like so :
<div class="outer-div" style="background: linear-gradient(158.72deg, rgba(255, 255, 255, 0.4) 3.01%, rgba(255, 255, 255, 0) 103.3%);">
<div class="inner-div" style="opacity: 0.5;">
<!-- content goes here -->
</div>
</div>
Related
I'm trying to create the blue background based on the picture: multiple css backgrounds with skewed part
So far I was able to do either the skew gradient part or the gradient itself.
background: linear-gradient(170deg, #031085 80%, #fff 80%); // skew
background: linear-gradient(90deg, #031085 10%, #0F69EF 80%); // linear
Do you know how to connect these together to achieve the result on the image?
Simply do like below:
html {
height:100%;
background:
linear-gradient(170deg, transparent 80%, #fff 80%),
linear-gradient(90deg, #031085 10%, #0F69EF 80%)
}
There is no multiple gradient background on css. If you want to you can add multi option on background
For Exaple:
background:
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}
For more detail you can check this source: https://css-tricks.com/css-basics-using-multiple-backgrounds/
Or
You can add two stacked div tag and you can assign individual backgrounds to them
<div class="background1"></div>
<div class="background2"></div>
This question already has answers here:
Semi-transparent color layer over background-image?
(19 answers)
Closed 3 years ago.
I am certainly new to Web design.
As seen in this picture, most of the websites I see have this kind of mask over images, and then text over that mask.
So how do I achieve that if I don't edit the picture that way, and want to add the mask over it.
I am using a Bootstrap Jumbotron for the header part of website, with container-fluid property and it's height set at 100vh.
I use an image as background image to the jumbotron. It's really a common thing and can be seen in many websites. For example:
So how do I add a mask or an overlay to the background image, certainly a black tint, so that I can make white text visible.
P.S.
I am very new to css, and I came to know about these mask and overlay properties today itself.
You could nest two blocks together, one with the background image, and the other with the overlay :
.background{
width: 500px;
height: 500px;
background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');
background-size: cover;
}
.overlay{
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="background">
<div class="overlay">
<!-- Content here -->
</div>
</div>
The opacity of the overlay can be modified with the last argument of the rgba() function.
Try to use linear gradient:
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../some-image.jpg");
For more info check this link: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
I have the following CSS code:
background: rgba(0, 0, 0, 0.5) url(bg1.png) top left/auto 50em repeat, url(bg2.png) top left/50% 100% no-repeat;
I think it's syntactically right according to this w3schools reference.
However, neither Chrome nor Firefox shows any background for the div it is applied to. What can be the issue?
According to Mozilla MDN:
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
selector {
background: url(bg1.png) top left/auto 50em repeat,
rgba(0, 0, 0, 0.5) url(bg2.png) top left/50% 100% no-repeat;
}
try with
background: rgba(0, 0, 0, 0.5) url('bg1.png') top left 50em repeat, url('bg2.png')
i have been 'google'ing for a few days to find out if it is possible to overlay multiple images (i.e. roof.png , walls.png) and then dynamically apply overlay colors to them (depending on the user's click on colors).
I solved the first part to colorize the roof but it gets complicated (impossible?) when I add the second layer, the walls. The 'roof.png' is 'above' the 'walls.png' and the color effect is not visible.
What I want to achieve is a coloring scheme like here but not with separate images for all the colors (i.e. roof_blue.png , roof_red.png) but with css rules for the transparent roof.png.
Any suggestion is highly appreciated.
EDITED :
I will try to be more specific so you can concentrate on the solution (if there is one...)
Here is my HTML part :
<div class="row">
<div class="col-lg-12">
<div class="visualisation_area">
</div>
<div class="buttons_area">
</div>
</div>
</div>
And here is the CSS :
.visualisation_area {
width: 100%;
height: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0.5)),
url(../images/roof_blank.png),
linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)),
url(../images/walls_blank.png);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: right,
center,
right,
center;
}
The result can be seen HERE
What I'm curious about is if there is a way to apply the 'blue' and 'red' gradients SEPARATELY to the roof_blank.png and walls_blank.png respectively so the colors don't mix but the roof gets blue and the walls red for example?
I have tried several combinations with divs and images but without some guidelines I'm going nowhere from this point... Thank you in advance!
You can use CCS Sprites instead of multiple files
You can try to create divs with complex shapes
I'm using box shadow CSS feature on images in my gallery, but somehow the inset parameter is not working. I tried z-index and I tried to put in different places code and it's still not working.
Visit the website here.
Code
box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;
It has nothing to do with your syntax. It's just a peculiarity of an img element, not the box-shadow property.
Consider looking at this example: http://jsfiddle.net/YhePf/ - if you disable showing images in your browser - you will see that instead of an image there will be a green block with the box-shadow applied to it.
Edit: In other words, the inset box-shadow property is applied but it cannot be seen because it's under the image itself (just like the background-color property). I may prove that with another fiddle. It's different from my previous one in the padding property. See here: http://jsfiddle.net/YhePf/6/ - see the red 2px shadow and the green background
I think you might just be missing the spread radius value from the first shadow. :)
i think there is a issue because inset box-shadow cant be applied on a image.the effect which you require can be easily achieved with help of border property. if you want to use inset box shadow apply it on div.
for more detail chk it out http://jordandobson.com/_expirements/css/vignette/