Dekking van achtergrondafbeelding wijzigen

Ik heb een div-element met tekstblokken en een parent-div waarin ik een achtergrondafbeelding heb ingesteld. Nu wil ik de dekking van de achtergrondafbeelding verminderen. Stel alstublieft voor hoe ik dat kan doen.

Bij voorbaat dank.

BEWERKEN:

Ik wil het uiterlijk van mijn blogbericht op blogger.com veranderen door de html-inhoud te bewerken. De html-code ziet er als volgt uit:

<div>
 //my blog post
</div>

Ik heb geprobeerd de hele code hierboven te omringen met een div-element en de dekking van elke div afzonderlijk in te stellen, zoals hieronder:

<div style="background-image:url("image.jpg"); opacity:0.5;">
<div style="opacity:1;">
 //my blog post
</div>
</div>

Maar het werkt niet.

Antwoord 1, autoriteit 100%

Er is niets dat achtergronddekking wordt genoemd. Dekking wordt toegepast op het element, de inhoud en alle onderliggende elementen. En dit gedrag kan niet worden veranderd door alleen de dekking in onderliggende elementen te overschrijven.

Dekking van kind versus ouder is een al lang bestaand probleem en de meest voorkomende oplossing hiervoor is het gebruik van rgba(r,g,b,alpha)achtergrondkleuren. Maar in dit geval, aangezien het een achtergrondafbeelding is, zal die oplossing niet werken. Een oplossing zou zijn om de afbeelding te genereren als een PNG met de vereiste dekking in de afbeelding zelf. Een andere oplossing zou zijn om de child div eruit te halen en hem absoluut gepositioneerd te maken.

Antwoord 2, autoriteit 94%

Tegenwoordig is het mogelijk om dit eenvoudig te doen met de CSS-eigenschap “background-blend-mode”.

<div id="content">Only one div needed</div>
div#content {
    background-image: url(my_image.png);
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    /* You may add things like width, height, background-size... */
}

Het zal de achtergrondkleur (die wit is, 0,6 dekking) in de achtergrondafbeelding mengen. Meer informatie hier (W3S).

Antwoord 3, autoriteit 99%

Je kunt transparantie niet rechtstreeks op achtergrondafbeeldingen gebruiken, maar je kunt dit effect bereiken met zoiets als dit:

http://jsfiddle.net/m4TgL/

HTML:

<div class="container">
    <div class="content">//my blog post</div>
</div>​

CSS:

.container {  position: relative; }
.container:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-image: url('image.jpg');
   opacity: 0.5;
}
.content {
    position: relative; 
    z-index: 2;
}​

Antwoord 4, autoriteit 100%

Probeer dit te doen:

.bg_rgba {
  background-image: url(https://picsum.photos/200);
  background-color: rgba(255, 255, 255, 0.486);
  background-blend-mode: overlay;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<div class="bg_rgba"></div>

<div style="width:100px; height:100px;">
   <div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div>
   <div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div>
</div>

.bg_rgba {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://picsum.photos/200');
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

<div class='bg_rgba'></div>

$bgimage = '[some image url];
background-image: url('<?php echo $bgimage; ?>');

<div id="bg-image"></div>
<div class="container">
    <h1>Hello World!</h1>
</div>

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;
}
#bg-image {
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url(images/background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}

filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;