Problems getting text opacity right

HTML & CSS
1

I am trying to make an image be seen under a colored div. But when I make the div 50% opacity, the lettering inside also goes to 50%. Making the p 100% opacity does not make it 100% opaque. How do I make the div background 50% opaque and the text in the div 100% opaque?

CSS:

body {
	margin:    0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6em; 
	font-size: 18px; 
}

.topPanel {
	width:100vw; 
	height:50vh; 
	background-color: gray;
	overflow: scroll;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

.bottomPanel {
	width:100vw; 
	height:50vh; 
	background-color: yellow; 
	clear:both;
	overflow: scroll;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

.grouped {
	position: absolute;
	top:0;
	left:0;
	z-index: 100; /* only works with positioned elements */
	display: block;
}

p {
	padding: 0 2rem;
	filter: alpha(opacity=100);
	opacity: 1;
}

h3 {
	padding: 1rem 0;
	text-align: center;
}
.background {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	}

.background  img {
	width: 100vw;
	z-index: -1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

HTML:

<body>
		<div class="background">
			<img class="bgPic" src="img/b64d-chassis.jpg">
		</div>
		<div class="grouped">
		<div class="topPanel">
			<h3>title</h3><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

			<h3>title</h3
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div><!-- topPanel -->

		<div class="bottomPanel">

		</div><!-- bottomPanel -->
		</div><!-- grouped -->

    </body>
2

Are you using background-image property? If you use background-image property you can use a channel alpha to define a opacity of image.

3

The backround image under the top div should be opaque enough for the lettering to be easily read. But in the bottom div it has to be 100% opaque so a circle clip-path makes the inside of the circle 100% opaque. That’s the only place the image should be 100% opaque. Outside the circle it should be the same as in the upper div. I’m afraid if I make the image 50% opacity, I won’t be able to make it 100% opacity in the circle clip-mask.

4

I found the answer here: https://www.w3schools.com/css/css_image_transparency.asp

"If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. "

5

Cool!

6

Some examples on how to do it with different background types here:-

2 Likes
7

Interesting examples! But the image does not seem to load.

8

It’s loading here. You can change the image URL to anything else you like.

9

The image loads for me, but it’s very slow.

10

@StevenHu,

The image is being called from http://www.lorempixel.com. “lorempixel” is sometimes very busy and slow to load… and if you call several different images on one page, then one or more might even not load at all. It’s not SamA74’s code. Any such outside resource could be slow… or fast. Depends on outside factors. It’s just one of those things a designer needs to be aware of and evaluate accordingly.

11

Thank you, everyone! I consider this question answered.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.