Hoe gee ek teks of 'n prent 'n deursigtige agtergrond met CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianVra
Is dit moontlik om slegs CSS te gebruik om die background van 'n element semi-deursigtig, maar het die inhoud (teks en beelde) van die element ondeursigtig?
Ek wil dit graag bereik sonder om die teks en die agtergrond as twee afsonderlike elemente te hê.
Wanneer jy probeer:
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>Dit lyk of kinderelemente aan die ondeursigtigheid van hul ouers onderwerp word, dus opacity:1 is relatief tot die opacity:0.6 van die ouer.
Oplossing
In ieder gebruik 'n semi-deursigtige PNG beeld of gebruik CSS3:
background-color:rgba(255,0,0,0.5);
Hier is 'n artikel van css3.info, Deursigtigheid, RGBA en kompromie (2007-06-03).
<p style="background-color:rgba(255,0,0,0.5);">
<span>Hello world</span>
</p>
Ander wenke
In Firefox 3 en Safari 3, kan jy RGBA gebruik soos Georg Schölly genoem .
'n bietjie bekend truuk is dat jy dit kan gebruik in Internet Explorer sowel met behulp van die helling filter.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Die eerste blok nommer definieer die alfa waarde van die kleur.
Full oplossing alle blaaiers:
.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 agtergrond deursigtigheid sonder dat kind elemente, deur RGBA en filters .
Screenshots bewys van resultate:
Dit is wanneer die gebruik van die volgende kode:
<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>
Dit is die beste oplossing wat ek kon kom met, NIE met behulp van CSS 3. En dit werk baie goed op Firefox, Chrome en Internet Explorer sover ek kan sien.
Sit 'n houer DIV en twee kinders divs in dieselfde vlak, een vir inhoud, een vir agtergrond. En die gebruik van CSS, motor-grootte die agtergrond van die inhoud pas en sit die agtergrond eintlik in die rug met behulp van z-indeks.
.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>
Vir 'n eenvoudige semi-deursigtige agtergrond, die bogenoemde oplossings (CSS3 of bg beelde) is die beste opsies. As jy egter iets wil liefhebber (bv animasie, verskeie agtergronde, ens) te doen, of as jy nie wil hê om te vertrou op CSS3, kan jy probeer om die "paneel tegniek":
.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>
Die tegniek werk deur gebruik te maak van twee "lae" binnekant van die buitenste paneel element:
- 'n (die "terug") wat die grootte van die venster element pas sonder dat die vloei van inhoud,
- en een (die "vervolg") wat die inhoud bevat en help bepaal die grootte van die venster.
Die position: relative op paneel is belangrik; dit vertel terug laag aan te pas by die grootte van die venster se. (As jy die <p> tag moet absolute te wees, verander die venster van 'n <p> 'n <span> en draai alles wat in 'n absoluut-posisie <p> tag.)
Die grootste voordeel van hierdie tegniek het meer as hierbo gelys soortgelyke is dat die paneel het nie 'n bepaalde grootte wees; soos hierbo gekodeer, sal dit full-wydte (normale blok-element uitleg) en net so hoog as die inhoud pas. Die buitenste paneel element kan enige manier wat jy wil, so lank as wat dit is vierkantige word grootte (dit wil sê inline-blok sal werk; plain-oue inline sal nie).
Ook, dit gee jou 'n baie vryheid vir die agtergrond; jy is vry om regtig iets in die rug element sit en het dit geen invloed op die vloei van inhoud (as jy verskeie full-grootte sub-lae wil, maak net seker hulle het ook posisie: absolute, wydte / hoogte: 100%, en bo / onder / links / regs:. motor)
Een variasie agtergrond insetsel aanpassing toelaat (via top / onderkant / links / regs) en / of agtergrond pinning (via die verwydering van een van die links / regs of bo / onder pare) is om die volgende CSS plaas gebruik:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
As geskryf, dit werk in Firefox, Safari, Chrome, IE8 +, en Opera, hoewel IE7 en IE6 ekstra CSS en uitdrukkings, IIRC, en laaste keer wat ek nagegaan, die tweede CSS variasie nie werk nie in Opera vereis.
Dinge om te kyk uit vir:
- Floating elemente binne die vervolg laag sal nie vervat. Jy moet seker maak dat hulle skoongemaak of andersins vervat, of hulle sal glip uit die onderkant.
- Marges gaan op die paneel element en padding gaan op die vervolg element. Moenie gebruik nie die teenoorgestelde (rande op die vervolg of padding op die paneel) of jy oddities ontdek soos die bladsy altyd effens wyer as die venster.
- Soos reeds genoem, die hele ding moet blok of inline-blok wees. Voel vry om
<div>s in plaas van<span>s gebruik om jou CSS vereenvoudig.
'n voller demo, wat uit die flexibiliteit van hierdie tegniek deur gebruik te maak van dit in tandem met display: inline-block, en met beide auto & spesifieke 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 'n lewe demo van die tegniek word op groot skaal gebruik:
Dit is beter om 'n semi-deursigtige .png gebruik .
Net oop Photoshop , beeld 'n 2x2 pixel skep (picking 1x1 kan 'n Internet Explorer fout veroorsaak! ), vul dit met 'n groen kleur en stel die ondeursigtigheid in "blad Lae" tot 60%. stoor dit dan en maak dit 'n agtergrond beeld:
<p style="background: url(green.png);">any text</p>
Dit werk koel, natuurlik, behalwe in pragtige Internet Explorer 6 . Daar is beter fixes beskikbaar, maar hier is 'n vinnige 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');
}
Daar is 'n truuk om die opmaak verminder: Gebruik 'n pseudo element as die agtergrond en jy kan die ondeursigtigheid te stel om dit sonder dat die belangrikste element en sy kinders:
Uitgawe:
Relevante kode:
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>
Browser ondersteuning is Internet Explorer 8 en later.
Die maklikste metode sou wees om 'n semi-deursigtige agtergrond beeld PNG gebruik.
Jy kan JavaScript gebruik te maak dit werk in Internet Explorer 6 as jy nodig het om te.
Ek gebruik die metode uiteengesit in Transparent PNGs in Internet Explorer 6 .
Anders as dit,
jy kan fake dit met behulp van two side-by-side sibling elements - maak een semi-deursigtige , dan absolutely position the other over the top
Hierdie metode laat jou toe om 'n beeld in die agtergrond en nie net 'n soliede kleur te hê, en kan gebruik word om deursigtigheid op ander eienskappe het soos grense. Geen deursigtige PNG beelde vereis.
Gebruik :before (of :after) in CSS en gee hulle die ondeursigtigheid waarde aan die element by sy oorspronklike ondeursigtigheid te verlaat. So jy kan gebruik: voor 'n faux element maak en gee dit die deursigtige agtergrond (of grense) wat jy wil en beweeg dit agter die inhoud wat jy wil ondeursigtig te hou met z-index.
'n Voorbeeld ( viool ) (let op dat die DIV met klas dad is net 'n paar konteks te verskaf en kontras met die kleure, hierdie ekstra element is eintlik nie nodig nie, en die rooi reghoek is verskuif 'n bietjie af en na regs sigbaar te laat die agtergrond agter die fancyBg element):
<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 hierdie 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 hierdie geval .fancyBg:before het die CSS eienskappe wat jy wil met deursigtigheid te hê (rooi agtergrond in hierdie voorbeeld, maar kan 'n beeld of grense wees). Dit is geposisioneer as absolute om dit te skuif agter .fancyBg (gebruik waardes van nul of wat ook al is meer geskik is vir jou behoeftes).
Die probleem is dat die teks eintlik 'n volledige dekking in jou voorbeeld. Dit het volle dekking binne die p tag, maar die p tag is net semi-deursigtige.
Jy kan die beeld 'n semi-deursigtige PNG agtergrond by te voeg in plaas van om dit te besef in CSS, of afsonderlike teks en div in 2 elemente en beweeg die teks oor die boks (byvoorbeeld, negatiewe marge).
Andersins sal dit nie moontlik wees nie.
EDIT:
Net soos Chris genoem: as jy 'n PNG-lêer met deursigtigheid te gebruik, moet jy 'n JavaScript tydelike oplossing te gebruik om dit te laat werk in die orige Internet Explorer ...
Byna al hierdie antwoorde aanvaar die ontwerper wil 'n soliede kleur agtergrond. As die ontwerper eintlik 'n foto as agtergrond wil die enigste werklike oplossing op die oomblik is JavaScript soos die jQuery Transify plugin elders genoem.
Wat ons moet doen is om aan te sluit die CSS werkgroep bespreking en maak hulle gee ons 'n agtergrond-ondeursigtigheid kenmerk! Dit moet hand aan hand met die meervoudige agtergronde funksie.
Hier is hoe ek dit doen (dit kan nie optimaal wees, maar dit werk):
Skep die div wat jy wil semi-deursigtige te wees. Gee dit 'n klas / id. Los dit leeg, en sluit dit. Gee dit 'n stel hoogte en breedte (sê 300 pixels by 300 pixels). Gee dit 'n dekking van 0,5 of wat ook al jy wil, en 'n agtergrond kleur.
Toe, direk onder dit div, skep 'n ander div met 'n ander klas / id. Skep 'n paragraaf daarin, waar jy jou teks sal plaas. Gee die div posisie: familielid, en top: -295px (dis NEGATIEWE 295 pixels). Gee dit 'n Z-indeks van 2 vir 'n Goeie maat, en maak seker sy ondeursigtigheid is 1. Styl jou paragraaf as jy wil, maar maak seker dat die afmetings is minder as dié van die eerste div sodat dit nie oorloop.
Dit is dit. Hier is die kode:
.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 werk in Safari 2.x, weet ek nie oor Internet Explorer.
Hier is 'n jQuery plugin dat alles sal hanteer vir jou, Transify ( Transify -. 'n jQuery plugin om maklik van toepassing deursigtigheid / ondeursigtigheid te agtergrond 'n element se )
Ek is besig om in hierdie probleem elke nou en dan, so ek besluit om iets wat die lewe baie makliker sou maak skryf. Die script is minder as 2 KB en dit verg net 1 lyn van kode te kry om dit te werk, en dit sal ook hanteer anima die ondeursigtigheid van die agtergrond as jy wil.
dekking van agtergrond, maar nie die teks het 'n paar idees. Óf beeld 'n semi-deursigtige, of trek 'n bykomende element.
'n rukkie terug het ek geskryf oor hierdie in Cross Browser Agtergrond Deursigtigheid Met CSS .
Bizarre Internet Explorer 6 sal jou toelaat om die agtergrond deursigtig te maak en te hou die teks op die top ten volle ondeursigtig. Vir die ander blaaiers dan stel ek voor die gebruik van 'n deursigtige PNG lêer.
As jy 'n Photoshop man, kan jy ook gebruik:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Of:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Met die oog op die agtergrond van 'n element semi-deursigtige maak maar het die inhoud (teks & beelde) van die element ondeursigtig. Jy moet css-kode vir die beeld te skryf en jy het een spesifieke eienskap wat genoem ondeursigtigheid te voeg met 'n minimum waarde. Bv.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// mindere die waarde meer sal deursigtigheid wees, erts die waarde minder sal deursigtigheid wees.
agtergrond-kleur: RGBA (255,0,0,0.5); as hierbo genoem is die beste antwoord eenvoudig gestel. Om te sê gebruik CSS3, selfs in 2013, is nie eenvoudig omdat die vlak van ondersteuning van verskeie blaaiers verander met elke iterasie.
Hoewel background-color word ondersteun deur al die groot blaaiers (nie nuut in CSS3) [1] die alfa Transparence kan lastig wees, veral met Internet Explorer voor weergawe 9 en met grens kleur op Safari voor weergawe 5.1. [2]
iets soos Compass of SASS kan regtig help produksie en kruis-platform verenigbaarheid.
[1] W3Schools: CSS agtergrond-kleur Property
[2] Norman se blog: Browser Support Kontrolelys CSS3 (Oktober 2012)
CSS3 het 'n maklike oplossing van jou probleem.Gebruik:
background-color:rgba(0,255,0,0.5);
Hier staan rgba vir rooi, groen, blou en alfawaarde.Groen waarde word verkry as gevolg van 255 en halwe deursigtigheid word verkry deur 0,5 alfa waarde.
As jy Minder , jy kan fade(color, 30%) gebruik.
Jy kan dit op te los vir Internet Explorer 8 deur (ab) met behulp van die helling sintaksis. Die kleur formaat is ARGB. As jy met behulp van die Sass voorverwerker jy kan kleure omskep met behulp van die ingeboude in funksie "dws-blok-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
rgba(red, green, blue, alpha), waar alpha is die vlak van deursigtigheid: Jy kan suiwer CSS 3 gebruik jy wil. Daar is geen rede JavaScript of jQuery vir.
Hier is 'n voorbeeld:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
Daar is 'n makliker oplossing vir 'n overlay sit oor 'n beeld op dieselfde div. Dit is nie die regte gebruik van hierdie instrument. Maar werke soos 'n bom om dit oortrek maak gebruik van CSS.
Gebruik 'n insetsel skaduwee soos volg:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
Dit is al wat:)
Jy kan gebruik RGBA (red, green, blue, alpha) in die CSS , iets soos hierdie:
So eenvoudig iets doen soos hierdie gaan werk in jou geval:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Jy kan dit doen met
rgba color codemet behulp van CSS soos hierdie voorbeeld geloei gegee.
.imgbox img{
height:100px;
width:200px;
position:relative;
}
.overlay{
background:rgba(74, 19, 61, 0.4);
color:#fff;
text-shadow:0px 2px 5px #000079;
height:100px;
width:300px;
position:absolute;
top:10%;
left:25%;
padding:25px;
}<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
<div class="overlay">
<p>This is Simple Text.</p>
</div>
</div>
Ek gebruik gewoonlik hierdie klas vir my werk. Sy redelik goed.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
As per my oogpunt die beste manier om die agtergrond te gebruik met ondeursigtigheid as ons gebruik hierdie dan sal ons nie ondeursigtigheid verloor vir die ander elemente soos toets kleur en grens ens ..
background-color: rgba(71,158,0,0.8);
Gebruik agtergrond met ondeursigtigheid
agtergrond-kleur: RGBA (R, G, B, Deursigtigheid);
Jy kan RGB kleur gebruik met ondeursigtigheid soos hierdie kleurkode in RGB (63,245,0) en voeg ondeursigtigheid soos (63,245,0,0.5) en ook RGBA voeg vervang RGB. A gebruik vir ondeursigtigheid
div{
background:rgba(63,245,0,0.5);
}
