CSS-achtergronddekking [duplicaat]

Ik gebruik iets dat lijkt op de volgende code:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

Ik had verwacht dat de achtergrond hierdoor een dekking van 0,4 zou hebben en de tekst 100% dekking. In plaats daarvan hebben ze allebei een dekking van 0,4.


Antwoord 1, autoriteit 100%

Kinderen erven ondoorzichtigheid. Het zou raar en onhandig zijn als ze dat niet deden.

Je kunt een doorschijnend PNG-bestand gebruiken voor je achtergrondafbeelding, of een RGBa-kleur (a voor alfa) gebruiken voor je achtergrondkleur.

Voorbeeld, 50% vervaagde zwarte achtergrond:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>

Antwoord 2, autoriteit 17%

Je kunt pseudo-elementen gebruiken ::before of ::after om een ​​semi-transparante achtergrond te krijgen en u kunt dit doen met slechts één container. Gebruik zoiets als dit:

<article>
  Text.
</article>

Pas dan wat CSS toe:

article {
  position: relative;
  z-index: 1;
}
article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Voorbeeld: CodePen.

Opmerking: Mogelijk moet u de z-index waarden aanpassen.


Antwoord 3, autoriteit 4%

De volgende methoden kunnen worden gebruikt om uw probleem op te lossen:

  1. CSS alpha-transparantiemethode (werkt niet in Internet Explorer 8):

    #div{background-color:rgba(255,0,0,0.5);}
    
  2. Gebruik een transparante PNG-afbeelding naar keuze als achtergrond.

  3. Gebruik het volgende CSS-codefragment om een ​​alfatransparante achtergrond voor meerdere browsers te maken. Hier is een voorbeeld met #000000 @ 0,4% dekking

    .div {
        background:rgb(0,0,0);
        background: transparent\9;
        background:rgba(0,0,0,0.4);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
        zoom: 1;
    }
    .div:nth-child(n) {
        filter: none;
    }
    

Voor meer details over deze techniek, zie this, dat een online CSS-generator heeft.


Antwoord 4, autoriteit 3%

Ik zou zoiets doen

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}
.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Het zou moeten werken. Dit veronderstelt dat je een semi-transparante afbeelding moet hebben, en geen kleur (waar je gewoon rgba voor zou moeten gebruiken). Ook wordt aangenomen dat je de dekking van de afbeelding niet zomaar vooraf in Photoshop kunt wijzigen.


Antwoord 5

Je kunt Sass’ transparentize gebruiken.

Ik vond het het nuttigst en meest gebruiksvriendelijk.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

Meer zien: #transparentize($color, $bedrag) ? Sass::Script::Waarde::Kleur


Antwoord 6

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

Antwoord 7

Dit komt omdat de binnenste div 100% van de dekking heeft van de div waarin deze is genest (die 40% dekking heeft).

Er zijn een paar dingen die u kunt doen om het te omzeilen.

Je zou als volgt twee afzonderlijke divs kunnen maken:

<div id="background"></div>
<div id="bContent"></div>

Stel de gewenste CSS-dekking en andere eigenschappen voor de achtergrond in en gebruik de eigenschap z-index (z-index) om de bContent div op te maken en te positioneren. Hiermee kun je de div over de achtergrond div heen plaatsen zonder dat er met zijn ondoorzichtigheid wordt geknoeid.


Een andere optie is om RGBa te gebruiken. Hiermee kunt u uw div’s nesten en toch div-specifieke dekking bereiken.


De laatste optie is om eenvoudig een semi-transparante .png-afbeelding van de gewenste kleur te maken in de gewenste afbeeldingseditor naar keuze, de eigenschap background-image in te stellen op de URL van de afbeelding en dan hoef je je geen zorgen te maken over rommelen met de CSS en het verliezen van de mogelijkheden en organisatie van een geneste div-structuur.


Antwoord 8

Zorg er wel voor dat de breedte en hoogte voor de voorgrond hetzelfde zijn als de achtergrond, of probeer de eigenschappen boven, onder, links en rechts te gebruiken.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>
<div class="foreground"></div>
<div class="background"></div>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

12 − 2 =

Other episodes