Combining background blend mode + opacity?

HTML & CSS
1

Multiply is the value I’m specifically working with here. I have a background color and an image, and I’m using background-blend-mode: multiply . Is there any way I can somehow add opacity to the background image here? I could add opacity to the background color via RGBA but I’m wondering if anyone can figure this out?

2

Do you want to show us your code thus far?

3

Here’s a very basic example:

4

What happens if you shim the image underneath and remove it from the div.

e.g.

.opacitycolor{position:relative;}
.opacitycolor:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-image: url("https://resources.finalsite.net/images/f_auto,q_auto/v1650880714/stjoseph/tlnpkyqrumea5bny3phh/schedule-visit.jpg");
   background-size: cover;
    background-position: center;
  z-index:-1;
  opacity:0.5;
}

My eyes aren’t good enough to tell if that works or not :slight_smile:

Edit: Actually no that doesn’t work :frowning:

1 Like
5

Thank you for trying :slight_smile: .

1 Like
6

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