I am trying to make an element opaque, that's in a <div> that is not opaque. I tried simply applying opacity: 1, but the background still showed through the element. I also tried adding !important to the attribute.
Thanks!
If the <div> has a background-color
Instead of using opacity on the <div>, you can use background-color: rgba(red, green, blue, alpha) to specify its background color. Just replace red, green, blue and alpha with their corresponding values.
If the <div> has a background-image
It is not trivially possible. But one workaround would be to have 2 <div>s, one over the other. The lower <div> would be non-opaque, and have a background. The upper <div> would have your content. Use z-index to place the div with the content above the div containing the background image.
Another workaround would be to actually have a transparent PNG image as the background-image of the <div>.
It is not possible, opacity is inherited (mandatory, cannot override), if the parent <div> you're using uses a background image, you have to move the element outside, maybe using absolute position, to locate it over the non-opaque one. If the parent <div> just have a color background and you make a percent transparent, easy!... you need to assign a RGBA color background (and opacity 1, of course).
I recommend a tool I've found useful: http://hex2rgba.devoth.com/ so you can calculate the rgba value properly. That's it
If your parent div simply has a background color or background image, then you can do something like this:
HTML:
<div id="parent">
<div id="child">
<span>Hello World</span>
</div>
</div>
CSS:
#parent{
width: 100px;
height: 100px;
position: relative;
}
#parent:after{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background: url('someimage.png') no-repeat 0 0 transparent;
opacity: 0.7;
z-index: -1;
}
Related
I just want the background image's opacity to be changed. Not the whole items like p.
css:
#home{
background-image: url('../img/main.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
height:100%;
opacity: .8;
}
html:
<section id="home">
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
</section>
The rule opacity is for the element. Not for the background. If you need to do that way, you have two options:
Fake the background by using another div and use opacity on it.
Use two different images with one having lesser opacity.
There are a lot of hacks available:
CSS Opacity on Child Element
Using :after and styling it.
while there isnt any way to change the background opacity directly, there is hacky way of doing it.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
taken from here
I don't think there's any property for CSS background transparency.
What you could do is create a child element that fills the space, and apply the background and transparency to that element.
If you want to pure CSS solution, you can create the child element using the :before pseudo selector with an empty content field.
If you're only wanting to change the opacity of a background image, it may be easier to actually save the image with a lower opacity, to avoid writing extra markup.
However, there are hacky work arounds that involve moving the 'child' elements over the top of the background using absolute positioning - there's a really useful article here.
I'm trying to learn HTML and CSS at the moment, and i am doing myself a site.
I used for the background picture
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
and i want to make a div opaque in order to add some photos on it.
For the rest of the divs in the site i used
background-color: black;
opacity: 0.8;
The problem is that when using opacity: 1; on the div which should contain the photos, the div dissapears (it appears for a split second behind the main background image).
I understand that opacity transfers from parent to child divs but i had just deleted all classes and made each div transparent by pasting those 2 lines of code and the div which i need with opacity: 1; still disappears under the background.
Any ideas? Thank you.
I would suggest using rgba colors to make things opaque, or you can use opaque pictures (pngs for example).
You would use rgba like this:
background: rgba(0,0,0,0.5);
the 0.5 says how much opaque it will be, the 0,0,0 is black - change that to any color you want.
I have a container with a background image that adds a semi-transparent background on hover. Here's my (simplified) HTML:
<div class="container">
<div class="overlay"></div>
<img src="hi.jpg">
</div>
Here's how I achieve the semi transparent overlay:
.container:hover > .overlay {
background-color: black;
height: 100%;
position: absolute;
width: 100%;
opacity: .2
}
However, when I hover over the container, not only is its background image affected by the black background, so is the image, as though the image were UNDER the overlay background, making it slightly darker. I tried remedying this by setting the image's z index to 3, but it is still darkened.
z-index only works on elements that are positioned, so give your image position: relative as well as increasing its z-index.
I have 40*40px png with transparent background with a 30*30px circle in the middle.
I would like to use that png as a button with a simple hover effect, but i want the hover effect to take place only when the cursor is actually on the circle, not on the transparent background.
Is there a plain HTML+CSS solution for this? I tried to check it here and on other forums, but I didn't find anything.
Yes, you can do this with HTML and CSS. First create a circle element and place it before your image. Then wrap both your image and the circle in a container, like this:
<div class="container">
<div class="circle"></div>
<img src="your-image.jpg" />
</div>
Then, use position: absolute to position the circle on top of the image (align it with the circle that's in the image), and use the + selector to select the next adjacent element when the circle is hovered.
.container {
position: relative;
}
.circle {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #222;
}
.circle:hover+img {
border: 5px solid aqua;
}
See DEMO.
Check out this script if you need to activate hover/click only when mouse is within the circle (and not in the square bounding box) http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/
It’s not possible in CSS only, as all elements are treated as rectangles, even if they are rendered with rounded corners.
Im working on the opacity of an element using css. a paragraph is place in a div but when i set the opacity of the div to 0.4 the paragraph also affect. I tried to override the div in the paragraph by asigning the opacity 1.0 by this doesnt work. How can I solve this?
The short answer is that you can't. That is just how opacity works.
A longer answer depends on what are you actually trying to achieve (the old XY Problem).
If, for instance, you wanted the background of the div to be translucent, but not the paragraph then you could solve that by using a translucent background instead of making the entire div translucent.
The only way I know to fix this is to separate the background from the content:
<div id="container" style="position: relative;">
<div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;"> </div>
<div id="content">Your content here</div>
</div>
I have done this earlier.
If I remember right, I set the position:absolute; to the innerDiv, hence the opacity property works well.
Another way to achieve this effect is to set the background of the outerDiv with alpha instead of opacity;
For eg:
change
.outerDiv{
background-color: white; //or #fff or rgb(255,255,255)
opacity: 0.4;
}
to
.outerDiv{
background-color: rgba(225,225,225,0.4);
}
The fourth value is the alpha which works like opacity. It will not bother the contents of the div.