How to make span element opaque, but keep opacity?

Question

I have a span element that serves as a resizing bar. It's current CSS is:

.Resizer { background: whitesmoke; opacity: .2; /*z-index: 1;*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*-moz-background-clip: padding;*/ /*-webkit-background-clip: padding;*/ background-clip: padding-box; }

However, I'm able the content behind the resizer bar. If I drag the resizer bar over a div that has non-flex content, the resizer bar overlaps the div and I'm able to see through the resizer bar. How can I keep the opacity, but have bar be opaque?

How can I keep the opacity, but have bar be opaque? - Sorry, what? — Mr. Alien
– Mr. Alien, Commented Jun 27, 2017 at 1:34
I think he means, "how do I keep the element at 0.2 opacity, but have the sub-element be at 1 opacity" — Tasgall
– Tasgall, Commented Jun 27, 2017 at 1:40
@Tasgali Yes, that is exactly what I mean. I want to keep the resizer bar styling, which has an opacity of 0.2, but I don't want the element to be transparent. — TheRealFakeNews
– TheRealFakeNews, Commented Jun 27, 2017 at 1:42

Tasgall · Accepted Answer · 2017-06-27 01:42:22Z

Instead of using the opacity field, give the element a background color using rgba. ex:

.Resizer { background: rgba(245, 245, 245, 0.2); -moz-box-sizing: border-box; ...

The opacity field has a cumulative effect on all sub-elements, making anything it contains at least as translucent. Using the background doesn't.

Collectives™ on Stack Overflow

How to make span element opaque, but keep opacity?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related