How to set background image opacity in CSS without pseudo before/after and/or positioned divs

问题

I have a div generated by a CMS which includes a background image which I'd like to change the opacity of without effecting the opacity of the div's child elements.

https://jsfiddle.net/L5b81yqo/

HTML

<div class="container">
    <p>Some dummy text</p>
</div>

CSS

.container {
  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
  width: 100%;
  height: 500px;
  background-size: cover;
}

Is it possible with CSS to change the opacity of the background image without using psuedo before /after (as this involves using the background URL which I can't use in the stylesheet as it's dynamic from the CMS and could be any URL) or adding additional markup (as the CMS won't let me add further markup).

I've looked at various solutions but all these appear to use the methods I can't use defined above e.g. https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

If it's not possible then that's fine and I can look at a workaround solution.

回答1:

without using psuedo before /after (as this involves using the background URL which I can't use in the stylesheet as it's dynamic from the CMS and could be any URL

You can still use pseudo element and inherit the background without the need of the url:

.container {
  /* I will not touch this */
  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); 
  /**/
  height: 400px;
  background-size: 0 0; /* make the main background hidden */
  position:relative;
  z-index:0;
}
.container::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background-image:inherit;
  background-size:cover;
  opacity:0.3;
}

<div class="container">
    <p>Some dummy text</p>
</div>

Or like below with a simple background-color layer on the top:

.container {
  /* I will not touch this */
  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); 
  /**/
  background-size:cover;
  height: 400px;
  position:relative;
  z-index:0;
}
.container::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background:rgba(255,255,255,0.7);
}

<div class="container">
    <p>Some dummy text</p>
</div>

回答2:

You can achieve this using background-blend-mode

background-blend-mode will work with background-color without background-color it will not work

.container {
  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
  width: 100%;
  height: 500px;
  background-size: cover;
  background-color: rgba(238, 238, 238, 0.81);
  background-blend-mode: color;
}

<div class="container">
  <p>Some dummy text</p>
</div>

Note: This will not work exactly as opacity but it is similar like opacity

回答3:

.container {
  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);
  width: 100%;
  height: 500px;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: color;
}

<div class="container">
	<p>Some dummy text</p>
</div>

You can do this using Banckground-color: rgba(your color in rbg, opacity) then background-blend-mode: color; This is it

来源：https://stackoverflow.com/questions/60600246/how-to-set-background-image-opacity-in-css-without-pseudo-before-after-and-or-po

标签

html

css