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>
Related
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)
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)
Basically I have a div that I want the background to be transparent.
<div id="modSideTop"><div id="modSideTopText">This Text Must Not Be Transparent</div></div>
The modSideTop div has a background image attached via css. What would the rest of the css that I need be to keep the text normal and the background transparent?
Thanks in Advance for your help!
Use an rgba color for the background rather than using opacity. For example, 50% translucent black:
background: rgba(0, 0, 0, 0.5);
Try it on JSFiddle.
Hi i am mentioning the property through which you can increase and decrease the opacity of background and that will not affect the text color its simple see the CSS basically you have to use the rgb color in background & alpa for opacity.
background:rgba(146,146,146,0.1);
or see the example:- http://jsfiddle.net/8LFLd/3/
I have two div's which looks like this
<div id="outer">
<div id="inner>
</div>
</div>
#outer {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
opacity:0.50;
}
The problem is that I get opacity and in the inner div. I know that I can put inner div outside the outer div, but this is not solution for me
Yeah that's because you are fading #outer and everything inside it.
If you are only trying to fade the background colour you have two options:
Use a transparent .gif as a background image.
use rgba. Rg. background-color: rgba(0, 0, 0, .6) is equals to Black with 60% opacity.
*EDIT*
Just realised it's for Internet Explorer 6, please be more clear next time.
In this case, rgba will not work, so give up on that.
You can still do so with transparent background image, but you'd need a jQuery plugin to make IE6 support .png images. Here's one http://jquery.andreaseberhard.de/pngFix/
Use rgba background colour to set opacity instead - your problem is just a standard css problem.
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)