Just saw something for the first time with opacity versus rgba and trying to confirm if/why the two don't mix well as it appears.
Basic example:
I've got a fullscreen div with a background image. That div has a dark overlay using an :after pseudo with a dark hex background-color and opacity.
I then have an absolutely positioned, light-colored heading on top using z-index and rgba.
When I do it with the mixed hex BG and rgba heading, the heading looks like a solid grey - as if the heading is transparent, but that the dark :after pseudo element loses its transparency where the heading is.
By changing the heading to hex and opacity, rather than rgba, everything's transparent exactly as the design was going for.
Can anyone explain why mixing the two is causing trouble? I'm having a hard time finding the right Google/Stack search to get a clear answer.
Abridged version of the HTML
<section id="banner">
<div class="inner">
Some content
</div>
<h2 class="transparent">The heading in question</h2>
</section>
The abridged CSS:
#banner {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('pathto/image.jpg');
background-size: cover;
}
#banner:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.35;
}
#banner .inner {
z-index: 2;
}
.transparent {
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
color: rgba(255,255,255,.5);
}
Try this approach...
#banner {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Pigeon_Point_Lighthouse_%282016%29.jpg/220px-Pigeon_Point_Lighthouse_%282016%29.jpg');
background-size: cover;
}
#banner:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.55);
}
#banner .inner {
z-index: 2;
}
.transparent {
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
font-size: 53px;
color: rgba(255,255,255,.25);
}
<section id="banner">
<div class="inner">
Some content
</div>
<h2 class="transparent">The heading in question</h2>
</section>
Related
I have an HTML/CSS pure layout and I'm using flexbox. I am developing a simple hamburger overlay menu sort of thing, but the overlay isn't fully covering the entire site -- there is no higher z-index present.
If I change the opacity to 0, the entire page goes white.
Desired Output:
Div that covers the entire page
Current Output (See Below):
HTML
<body data-theme="light" class="overlay">
...
</body>
CSS
.overlay {
opacity: 1;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
Output
You can't make the HTML body an overlay because it is the main container for the whole page, so it contains the elements you are trying to overlay.
Instead you can create a separate div for the overlay. This shouldn't have any content (unless you want content in your overlay of course). Then you can add your existing overlay class to it:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
h1, p { color: red;}
<body data-theme="light">
<div class="overlay"></div>
<h1>Hello</h1>
</body>
First you may add
.FlexContainer{position: relative;}
Next a few changes for the Overlay:
.FlexContainer .Overlay {
position: absolute;
top: 0;
left: 0;
margin: 0;
border: none;
width: 100%;
height: 100%;
background-color: rgba(013, 130, 230, 0.5);
cursor: not-allowed;
}
I have tried to create a minimal snippet that demonstrates the situation. The following HTML/CSS creates two boxes, one red and one cyan. Each one contains a clickable link. When I apply a CSS filter (as I have done to create the cyan one), the box is no longer clickable. My best guess is that this has to do with "stacking contexts," but I admit I don't know enough about them.
For the second part of the question, working around this, is there any way I can modify the CSS for the filtered class to avoid this issue? I am running into this in the context of a Chrome extension that applies CSS filters to images, so I would like a solution that does not require modifying the underlying structure of the site (the HTML) or significantly changing the way the site looks. I would consider it particularly useful if there were a solution that could be applied programmatically without introducing risk that other sites will now behave incorrectly.
.filtered {
filter: invert(100%);
}
/* I cannot modify any of the following CSS to solve this. */
div, a {
display: block;
height: 50px; width: 50px;
left: 0; top: 0;
position: absolute;
}
.outer:before {
display: block;
height: 50px; width: 50px;
left: 0px; top: 0;
position: absolute;
content: '';
z-index: 2;
}
.inner {
background: red;
}
.link {
z-index: 2;
}
<div style="position: relative">
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div style="position: relative">
<div class="outer">
<div class="inner filtered">
</div>
</div>
</div>
You should set the z-index of the .filtered element higher than the z-index of the :before pseudo class:
.filtered {
filter: invert();
z-index: 10;
}
.filtered {
filter: invert();
z-index: 10;
}
/* I cannot modify any of the following CSS to solve this. */
div, a {
display: block;
height: 50px; width: 50px;
left: 0; right; 0; top: 0; bottom: 0;
position: absolute;
}
.outer:before {
display: block;
height: 50px; width: 50px;
left: 0px; right: 0px; top: 0; bottom: 0;
position: absolute;
content: '';
z-index: 2;
}
.inner {
background: red;
}
.link {
z-index: 2;
}
<div class="outer">
<div class="inner filtered">
</div>
</div>
I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.
However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.
<div class="blackBackground">
<div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
<p class="text-inside-image">Fashion</p>
</div>
</div>
Here's my CSS:
.blackBackground {
background-color: black;
z-index: -1;
}
.opacityFilter {
opacity: 0.8;
position: relative;
}
.margin-bottom-negsix {
margin-bottom: -6px !important;
}
.topicImage {
padding-bottom: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative !important;
height:150px;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.text-inside-image {
position: absolute;
top: 20%;
left: 35%;
color: white;
font-size: 24px;
font-weight: 500;
z-index: 1;
}
I've tried several solutions such as CSS - Opaque text on low opacity div?
and How to keep text opacity 100 when its parent container is having opacity of 50
and a couple more, but no luck.
My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/
Why is this occurring and how to fix it?
Hi change your HTML like this
HTML
<div class="my-container">
<h1 class="text-inside-image">Fashion</h1>
<img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>
CSS
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.my-container h1 {
padding: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #fff;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
opacity: 0.6;
}
for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview
You have set a translucent background colour on the element and then covered it up with a background image.
If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.
I have a big image with a dark overlay covering the front of my webpage. I want to add a div filled with bright text on top of the overlay.
Is there a way to position the div so as to exclude it from the overlay?
HTML:
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
z-index: 1;
}
.about-us {
background-image: url("img.jpg");
width: 1100px;
height: 731px;
display: block;
position: relative;
}
<div class="about-us">
<div class="overlay">
<div class="intro">
<h2>Catchy title</h2>
<p>Small Para</p>
<h1>More txt</h1>
</div>
</div>
</div>
Something like this:
h2 {
background-color: white;
z-index: 2;
}
Assuming that was what you wanted on top.
Use a pseudo element instead of an overlay element.
.about-us:before {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
}
Also you need to explicitly specify position property for intro element in able to interact with the content:
.intro {
position: relative;
}
See example here
I have a footer which is purple, but then also have an overlay image for the footer which I am showing using a ::after selector:
footer::after {
content: "";
background: url(/wp-content/themes/atheme/images/footermask.png);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 100;
}
I have the usual links and social items in the footer, but the ::after mask is causing them to not be clickable. As a work around I positioned the elements absolutely and gave them a higher z index but its causing other issues with position and I feel its not the right way to go about it.
How can these elements NOT be absolutely positioned, yet still come above the overlay ::after mask?
Example here: https://jsfiddle.net/g88ucp7k/
First of, remove the z-index: 100; from the ::after
Wrap your footer content inside a position:relative DIV
Set z-index to that content in order to overlay... the overlay :)
footer {
padding: 50px 0;
width: 100%;
background-color: purple;
overflow: hidden;
}
footer .content{ /* ADDED */
position:relative;
z-index:1;
}
footer a{
color: white;
}
footer::after {
content: "";
background: url(http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/05/shards_pattern.jpg);
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
/* z-index: 100; REMOVED */
height: 125px;
}
<footer>
<div class="content">
A link
</div>
</footer>