Kan ik de eigenschap opacity
alleen toewijzen aan de eigenschap background
van een div
en 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 rgba
kan 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 divs
te 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:
- Maak de twee verschillende div’s. Ze zullen broers en zussen zijn, niet in elkaar opgesloten of zo.
- Geef de
text
div een effen achtergrondkleur, want dat is de JavaScript-loze standaard. - Gebruik jQuery om de hoogte van de
text
div te krijgen en pas deze toe op debackground
div.
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.