Vraag Hoe geef ik tekst of een afbeelding een transparante achtergrond met behulp van CSS?


Is het mogelijk, alleen met behulp van CSS, om de background van een element semi-transparant maar hebben de inhoud (tekst & afbeeldingen) van het element ondoorzichtig?

Ik zou dit willen bereiken zonder de tekst en de achtergrond als twee afzonderlijke elementen te hebben.

Bij het proberen:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Het lijkt erop dat onderliggende elementen onderhevig zijn aan de ondoorzichtigheid van hun ouders, dus opacity:1 is relatief aan de opacity:0.6 van de ouder.


1997
2018-04-30 09:00


oorsprong


antwoorden:


Gebruik een semi-transparant PNG afbeelding of gebruik CSS3:

background-color:rgba(255,0,0,0.5);

Hier is een artikel van css3.info, Dekking, RGBA en compromis (2007-06-03).


2115
2017-07-13 20:51



In Firefox 3 en Safari 3 kunt u RGBA-achtig gebruiken Georg Schölly genoemd.

Een weinig bekende truc is dat je het ook in Internet Explorer kunt gebruiken met behulp van het verloopfilter.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Het eerste hexadecimale getal definieert de alpha-waarde van de kleur.

Volledige oplossing voor alle browsers:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: 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)";
}

Dit is van CSS-achtergrondtransparantie zonder invloed te hebben op onderliggende elementen, via RGBa en filters.

Screenshots bewijs van resultaten:

Dit is wanneer u de volgende code gebruikt:            

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8


456
2018-04-30 20:42



Dit is de beste oplossing die ik zou kunnen verzinnen, NIET met behulp van CSS 3. En het werkt geweldig op Firefox, Chrome en Internet Explorer voor zover ik kan zien.

Zet een container-DIV en twee onderliggende DIV's op hetzelfde niveau, één voor inhoud, één voor achtergrond. En gebruik CSS om de achtergrond automatisch aan te passen aan de inhoud en de achtergrond daadwerkelijk achterin te plaatsen met behulp van de z-index.

    .container {
      position: relative;
    }
    .content {
      position: relative;
      color: White;
      z-index: 5;
    }
    .background {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: Black;
      z-index: 1;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>


97
2018-05-24 16:07



Het is beter om een ​​semi-transparant te gebruiken .png.

Net open Photoshop, Maak een 2x2 pixelafbeelding (pluk 1x1 kan een Internet Explorer-bug veroorzaken!), vul het met een groene kleur en zet de dekking op het tabblad "Lagen" op 60%. Sla het vervolgens op en maak er een achtergrondafbeelding van:

<p style="background: url(green.png);">any text</p>

Het werkt natuurlijk cool, behalve in het mooie Internet Explorer 6. Er zijn betere oplossingen beschikbaar, maar hier is een snelle hack:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

54
2017-10-05 08:15



Voor een eenvoudige semi-transparante achtergrondkleur zijn de bovenstaande oplossingen (CSS3- of bg-afbeeldingen) de beste opties. Wilt u echter iets mooiers doen (bijvoorbeeld animatie, meerdere achtergronden, enz.), Of wilt u niet vertrouwen op CSS3, dan kunt u de "ruittechniek" proberen:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

De techniek werkt door twee "lagen" in het buitenste ruitelement te gebruiken:

  • één (de "achterkant") die bij de grootte van het vensterelement past zonder de inhoudstroom te beïnvloeden,
  • en één (de "cont") die de inhoud bevat en helpt bij het bepalen van de grootte van het paneel.

De position: relative op paneel is belangrijk; het vertelt de terugkomende laag zodat deze past bij de grootte van het paneel. (Als u de <p> tag om absoluut te zijn, verander het paneel van een <p> naar een <span> en verpak dat allemaal in een absolute positie <p> label.)

Het belangrijkste voordeel van deze techniek ten opzichte van vergelijkbare hierboven genoemde is dat het deelvenster geen opgegeven grootte hoeft te hebben; zoals hierboven gecodeerd, past het op de volledige breedte (normale blokelementindeling) en alleen zo hoog als de inhoud. Het buitenste ruitelement kan op elke gewenste manier worden aangepast, zolang het maar rechthoekig is (dat wil zeggen inline-blok zal werken; gewoon oud inline zal dit niet doen).

Ook geeft het je veel vrijheid voor de achtergrond; je bent vrij om echt alles in het achtergrondelement te plaatsen en het heeft geen invloed op de inhoudstroom (als je meerdere full-size sublagen wilt, zorg er dan voor dat ze ook een positie hebben: absoluut, breedte / hoogte: 100%, en boven / onder / links / rechts: automatisch).

Eén variatie om achtergrondverplaatsing (via boven / onder / links / rechts) en / of achtergrondspinning mogelijk te maken (via het verwijderen van een van de links / rechts of boven / onder paren) is om in plaats daarvan de volgende CSS te gebruiken:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Zoals geschreven, werkt dit in Firefox, Safari, Chrome, IE8 + en Opera, hoewel IE7 en IE6 extra CSS en expressies vereisen, IIRC, en de laatste keer dat ik controleerde, werkt de tweede CSS-variant niet in Opera.

Dingen om op te letten:

  • Drijvende elementen in de cont-laag worden niet ingesloten. Je moet ervoor zorgen dat ze worden gewist of op een andere manier worden ingeperkt, anders vallen ze uit de grond.
  • Marges gaan op het ruitelement en de opvulling gaat op het cont element. Gebruik het tegenovergestelde niet (marges op de cont of padding in het paneel) of u zult eigenaardigheden ontdekken, zoals dat de pagina altijd iets breder is dan het browservenster.
  • Zoals vermeld, moet het hele blok of inline-blok zijn. Voel je vrij om te gebruiken <div>s in plaats van <span>s om uw CSS te vereenvoudigen.

Een volledigere demo, die de flexibiliteit van deze techniek laat zien door deze tegelijkertijd te gebruiken display: inline-blocken met beide auto & specifiek widths /min-heights:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

En hier is een live demonstratie van de techniek die op grote schaal wordt gebruikt:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



Er is een truc om de markup te minimaliseren: Gebruik a pseudo element als de achtergrond en je kunt de dekking instellen zonder het hoofdelement en de onderliggende elementen te beïnvloeden:

DEMO

Output:

Background opacity with a pseudo element

Relevante code:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Browserondersteuning is Internet Explorer 8 en later.


47
2018-01-14 00:14



De eenvoudigste methode zou zijn om een ​​semi-transparante achtergrond te gebruiken PNG-afbeelding.

U kunt JavaScript gebruiken om het te laten werken Internet Explorer 6 als je moet.

Ik gebruik de methode die wordt beschreven in Transparante PNG's in Internet Explorer 6.

Behalve dat,

je zou het kunnen gebruiken two side-by-side sibling elements - maken een semi-transparant, dan absolutely position the other over the top?


23
2018-04-30 09:14



Met deze methode kunt u een afbeelding op de achtergrond plaatsen en niet alleen een effen kleur en kunt u transparantie gebruiken voor andere kenmerken, zoals randen. Er zijn geen transparante PNG-afbeeldingen vereist.

Gebruik :before (of :after) in CSS en geef ze de opaciteitswaarde om het element op de oorspronkelijke opaciteit te laten staan. Je kunt dus: before gebruiken om een ​​faux-element te maken en het de transparante achtergrond (of randen) geven die je wilt en het verplaatsen achter de inhoud die je ondoorzichtig wilt houden met z-index.

Een voorbeeld (viool) (merk op dat de DIV met klasse dad is gewoon om wat context en contrast aan de kleuren te geven, dit extra element is eigenlijk niet nodig, en de rode rechthoek is iets naar beneden verplaatst en naar rechts om de achtergrond achter de fancyBgelement):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

met deze CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

In dit geval .fancyBg:before heeft de CSS-eigenschappen die u wilt hebben met transparantie (rode achtergrond in dit voorbeeld, maar kan een afbeelding of randen zijn). Het is gepositioneerd als absoluut om het achter te laten .fancyBg (gebruik waarden van nul of wat beter bij uw behoeften past).


20
2018-01-26 16:36



Het probleem is dat de tekst feitelijk volledig ondoorzichtig is in uw voorbeeld. Het heeft volledige dekking binnen de p tag, maar de p tag is gewoon semi-transparant.

U kunt een semi-transparante PNG-achtergrondafbeelding toevoegen in plaats van deze te realiseren in CSS, of tekst scheiden en opdelen in 2 elementen en de tekst over het kader verplaatsen (bijvoorbeeld negatieve marge).

Anders is het niet mogelijk.

BEWERK:

Zoals Chris al zei: als je een PNG-bestand met transparantie gebruikt, moet je een JavaScript-oplossing gebruiken om het te laten werken in de vervelende Internet Explorer ...


14
2017-10-25 13:55



Bijna al deze antwoorden gaan ervan uit dat de ontwerper een effen achtergrond in kleur wil. Als de ontwerper eigenlijk een foto als achtergrond wil, is de enige echte oplossing op dit moment JavaScript zoals de plug-in jQuery Transify elders vermeld.

Wat we moeten doen is deelnemen aan de CSS werkgroepdiscussie en ervoor zorgen dat ze ons een achtergrond-ondoorzichtigheidsattribuut geven! Het zou hand in hand moeten werken met de functie voor meerdere achtergronden.


14
2018-04-30 09:13



Hier is hoe ik dit doe (het is misschien niet optimaal, maar het werkt):

Maak het div dat je semi-transparant wilt zijn. Geef het een klasse / id. Laat het LEEG staan ​​en sluit het. Geef het een ingestelde hoogte en breedte (zeg 300 pixels bij 300 pixels). Geef het een dekking van 0.5 of wat je maar wilt, en een achtergrondkleur.

RECHTSTREEKS HIERONDER DAN die div, maak nog een div met een andere class / id. Maak een alinea erin, waar u uw tekst plaatst. Geef de div positie: relatief en boven: -295px (dat is NEGATIEVE 295 pixels). Geef het een z-index van 2 voor een goede maat, en zorg ervoor dat de dekking 1 is. Style je alinea zoals je wilt, maar zorg ervoor dat de afmetingen kleiner zijn dan die van de eerste div dus het loopt niet over.

Dat is het. Hier is de code:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Dit werkt in Safari 2.x, ik weet het niet van Internet Explorer.


13
2018-04-30 09:52