html - Comment donner du texte ou une image un fond transparent en utilisant CSS
meilleur 5 Réponses html - Comment donner du texte ou une image un fond transparent en utilisant CSS
97
background-color: rgba(255, 0, 0, 0.5); <p style="background-color: rgba(255, 0, 0, 0.5);"> <span>Hello, World!</span> </p>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> 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>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>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'); }