html - Comment donner du texte ou une image un fond transparent en utilisant CSS

Mots clés : htmlcssopacityhtml

meilleur 5 Réponses html - Comment donner du texte ou une image un fond transparent en utilisant CSS

vote vote

97

background-color: rgba(255, 0, 0, 0.5); 
<p style="background-color: rgba(255, 0, 0, 0.5);">   <span>Hello, World!</span> </p>
vote vote

81

background-color: rgba(0, 255, 0, 0.5); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00'); 
.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)"; } 
 <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> 
vote vote

74

.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>
vote vote

66

.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> 
.pane > .back {     position: absolute;     width: auto; height: auto;     top: 0px; bottom: 0px; left: 0px; right: 0px; } 
.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>
vote vote

60

<p style="background: url(green.png);">any text</p> 
p {     _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none'); } 

Questions similaires