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.
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 div with stuff in it on a page with a background gradient.
Now towards the right, I would like to fade that div out to the background:
I have tried using background gradients, but those are behind the text. Basically what I would need was a foreground property which I could fill with another gradient.
How can I achieve this without needing to use canvas and JavaScript?
I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.
.transparent {background: url("xxxxxx.png") repeat-y 0 0 transparent; position:absolute; top:0; right:0; z-index:1;}
Hope this helps.
A transparent (rgba) gradient in a separate DIV positioned absolutely on top of the original div should do the trick.
Caveat: Absolute positioning may not be feasible, depeding on your layout.
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 am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}