I've been struggling to understand the CSS interaction in a project I've been working on. Here's a codepen recreating it and the css I've used.
Codepen
.container
/*background is set to emulate the real use case*/
background red
height 400px
width 600px
position relative
display flex
justify-content center
align-items center
opacity 0.9
.blurred
background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
height 100%
width 100%
position absolute
filter blur(7px)
z-index -1
.text
font-size 35px
text-transform uppercase
color brown
/*this div is for comparison.
at 0.9 opacity the white background under it is
not visible yet the image under .container is clearly
visible at 0.9 opacity */
.comparison
height 400px
width 600px
background red
opacity 0.9
The idea here is that I wish to have an image with blur applied to it but also have text over it that's not blurred. The .container doesn't technically need a background color set but for the sake of recreating the issue exactly the way I encountered it I've set it's background color to red.
So according to my understanding lowering the opacity on .container makes .container and all its children more transparent. That is to say the lower it goes the easier it is to see the white background beneath all the elements. What I don't understand is why does the opacity also make .container fully transparent. I can clearly see the background image trough it. What I expected was for container to be filled with red and just barely showing the image inside. Instead .container has no filling color and I can clearly see the image.
I've made another div as a comparison. It's just a div with 0.9 opacity and nothing else. It doesn't lose it's background color like .container does.
I hope I've explained my question thoroughly enough. I've been trying to wrap my head around this for days now!
Background color goes behind the contents not on top, which is why it's called "back" ground. So your red background is behind your .blurred and .text.
When you set a background image of .banner class, that element is on top of background color. The reason your comparison div does not lose as much color is because there is nothing in front of background color. If you set the opacity of .blurred to reduce it's opacity and offset the competition you will get desired effect.
If you want the red background color to "lay on top" of the blurred background image, you can try adding it as a gradient "image" like this:
background-image linear-gradient(rgba(255,0,0,.9), rgba(255,0,0,.9)), url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
Related
I want to make a blur effect in the background of a navbar component.
If I use a normal blur effect that exist on CSS core, it will not work like I want, so I want some help with this.
Examples:
Onthe first image, the panel section on the bottom has some "transparent background", but it is not opacity.
On the right side there is a navbar with that blur effect.
I tried to use CSS blur effect but it makes the menu items not readable.
It's done by a mix of setting opacity to the background color, and adding a blur filter.
For the example below, take a look at background:rgba(0,0,0,.7) and backdrop-filter: blur(5px).
For background color, you must use RBGA instead of hex. Adjust the .7 at the end to customize opacity. Similarly with blur filter, adjust the (5px) for intensity of blur.
.navbar {
background:rgba(0,0,0,.7);
backdrop-filter: blur(5px);
color:#fff;position:fixed;height:300px;width:500px}
img {position:fixed}
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<div class="navbar">
transparent black background
</div>
I have a background image and a div that comes on top of that. I want the other div to be transparent (partially) so that I can still see the background below it with some opacity (if possible). I am new to CSS so any help would be great.
Thanks in advance.
Put this in the top div that you have.
background: rgba(0,0,0,0.5);
Use the css property opacity to set the level of transparency of the div in question. Example:
#transparent-div{
opacity:0.4;
}
The opacity property works on a scale between 0 and 1 with 1 being completely opaque and 0 being completely transparent.
I have a division that I gave a black background color. The body of the HTML is yellow. What I want is the first black div to fade out.
I wanted to do this using a background-image. The background image is a png file that is black as well, but has a transparency from 0% on the left and gradually goes to 100% on the right.
If I also add this background-image to my division, it remains black.
I understand why this happens, because the image is transparent, and behind that image is still the black color. I get that. Is there a way to do it though? Is there a way to disregard a background-color where a background-image is positioned?
I rather don't create extra html elements if it ain't necessary.
You should use the linear-gradient CSS function for your div.
background: linear-gradient(to right, black, white)
See http://i40.tinypic.com/2nv4gol.png for example image.
I have a span element (blue background in example image) that contains other span elements (red background in example image). Currently, the inner spans' red background color take precedence over the container span's blue background color.
I need the container span's blue background color to take precedence over the inner spans' red background color.
Can I do something with the container span's z-index and fiddle its opacity? Any help would be appreciated.
maybe you can define a new css for the inner spans, make it transparent background and add a !important to the CSS rule, like, if the inner spans are class 'x' ...
.x {background-color:transparent !important}
Well, you could try setting the container to position: relative; z-index: 1; and the inner ones to position: relative; z-index: 0;, but I think that would hide the text behind the background colour too.
I think more information on why you are trying to do this would help give a better answer than this, but maybe you could have some JavaScript remove the background colour of the inner spans? Like I said, it depends on what you're doing, exactly.
I have a page having the background image using:
background:url('gir.gif') scroll no-repeat 0 0 #foo;
I want to provide color on the top of the image, such that the image is looking like behind the color.
#bashu; it's a better to use rgba color transparency because it's not transparent you content at all.
background: rgba(0,0,0,0.3)
for IE
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
you can create your rgba filter for IE for here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
check this for more Opacity of div's background without affecting contained element in IE 8?
The div with the background image should be separated from the div that holds your content and the background color.
The div with the content and background color should span the entire other div and have an opacity, or you can create a 1x1 transparant gif/png of the color instead.
Here is a jsfiddle example:
http://jsfiddle.net/AZk6c/
I would recommend using a transparant image as color instead so the text doesn't become transparant with the rest of the div. (unless there is no text in that div of course)