CSS-dekking alleen voor de achtergrondkleur, niet voor de tekst erop?

Kan ik de eigenschap opacityalleen toewijzen aan de eigenschap backgroundvan een diven niet aan de tekst erop?

Ik heb het geprobeerd:

background: #CCC;
opacity: 0.6;

maar dit verandert niets aan de dekking.


Antwoord 1, autoriteit 100%

Het klinkt alsof je een transparante achtergrond wilt gebruiken, in dat geval kun je proberen de rgba()functie:

rgba(R, G, B, A)

R (rood), G (groen) en B (blauw) kunnen <integer>s of <percentage>s zijn, waarbij het getal 255 komt overeen met 100%. Een (alpha) kan een <number>zijn tussen 0 en 1, of een <percentage>, waarbij het cijfer 1 overeenkomt met 100% (volledige dekking).

RGBa-voorbeeld

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

Een klein voorbeelddat laat zien hoe rgbakan worden gebruikt.

Vanaf 2018 ondersteunt bijna elke browser de rgba-syntaxis .


Antwoord 2, autoriteit 6%

De makkelijkste manier om dit te doen is met 2 div’s, 1 met de achtergrond en 1 met de tekst:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

Antwoord 3, autoriteit 2%

Alleen voor Mindergebruikers:

Als u uw kleuren niet wilt instellen met RGBA, maar liever HEX gebruikt, zijn er oplossingen.

Je zou een mix kunnen gebruiken zoals:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

En gebruik het als:

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

Eigenlijk is dit wat een ingebouwde Less-functieook biedt:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Zie Hoe converteer ik een hexadecimale kleur naar rgba met de Less-compiler?


Antwoord 4

Mijn truc is om een transparante .png met de kleur te maken en background:url()te gebruiken.


Antwoord 5

Dit werkt met elke browser

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

Als u niet wilt dat transparantie de hele container en de onderliggende items beïnvloedt, controleert u deze tijdelijke oplossing. Je moet een absoluut gepositioneerd kind hebben met een relatief gepositioneerde ouder om dit te bereiken. CSS-dekking die geen invloed heeft op onderliggende elementen

Bekijk een werkende demo op CSS Ondoorzichtigheid die geen invloed heeft op “kinderen”


Antwoord 6

Ik had hetzelfde probleem. Ik wil een 100% transparante achtergrondkleur. Gebruik gewoon deze code; het heeft geweldig gewerkt voor mij:

rgba(54, 25, 25, .00004);

Je kunt voorbeelden zien aan de links op deze webpagina(het contactformulier).


Antwoord 7

Een geweldige manier om dit te doen zou zijn om inderdaad CSS 3 te gebruiken.

Maak een div-breedte voor een klasse – bijv. supersizer bovenaan je pagina:

Stel vervolgens de volgende CSS-eigenschappen in:

 .supersizer {
    background: url("https://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>

Antwoord 8

Voor iedereen die deze draad tegenkomt, is hier een script genaamd datnotyochild.js die ik net heb geschreven die dit probleem automatisch oplost:

http://www.impressivewebs.com/fixing-parent-child-Opacity /

Kortom, het scheidt kinderen uit het ouderelement, maar houdt het element op dezelfde fysieke locatie op de pagina.


Antwoord 9

De eenvoudigste oplossing is om 3 divste maken. Een die de andere 2 bevat, degene met transparante achtergrond en die met inhoud. Maak de positie van de eerste DIP relatief en stel degene met transparante achtergrond in op negatieve z-index, pas vervolgens de positie van de inhoud aan om over de transparante achtergrond te passen. Op deze manier heeft u geen problemen met absolute positionering.


Antwoord 10

Gebruik:

background:url("location of image"); // Use an image with opacity

Deze methode werkt in alle browsers.


Antwoord 11

Dat kan niet. Je moet een aparte div hebben die precies die achtergrond is, zodat je de dekking alleen daarop kunt toepassen.

Ik heb dit onlangs geprobeerd en aangezien ik jQuery al gebruikte, vond ik het volgende het minste gedoe:

  1. Maak de twee verschillende div’s. Ze zullen broers en zussen zijn, niet in elkaar opgesloten of zo.
  2. Geef de textdiv een effen achtergrondkleur, want dat is de JavaScript-loze standaard.
  3. Gebruik jQuery om de hoogte van de textdiv te krijgen en pas deze toe op de backgrounddiv.

Ik weet zeker dat er een soort CSS-ninja-manier is om dit allemaal te doen met alleen floats of zoiets, maar ik had niet het geduld om het uit te zoeken.

Other episodes