Este posibil, folosind doar CSS, pentru a face "background" de un element semi-transparent, dar au conținut (text & imagini) dintre elementul opac?
Am'd ca pentru a realiza acest lucru fără a avea text și fundal ca două elemente distincte.
Atunci când încearcă:
<p>
<span>Hello world</span>
</p>
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
Se pare ca copilul elemente sunt supuse opacitate de părinții lor, așa opacitate:1este relativ la
opacitate:0.6` de părinte.
Folosi fie o semi-transparent PNG imagine sau de a folosi CSS 3:
background-color: rgba(255, 0, 0, 0.5);
Aici's un articol din css3.info, Opacitate, RGBA și compromis (2007-06-03).
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
În Firefox 3 și Opera 3, puteți utiliza RGBA ca Georg Schölly menționat.
Un mic truc este că îl puteți folosi în Internet Explorer, precum și utilizarea gradient filtru.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Primul numar hexazecimal definește valoarea alfa a culorii.
Soluție completă pentru toate browserele:
.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)";
}
Acest lucru este de CSS transparență de fundal, fără a afecta copilul elemente, prin RGBa și filtre.
<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>
Aceasta este cea mai bună soluție ar putea veni cu o, NU cu ajutorul CSS 3. Și funcționează foarte bine pe Firefox, Chrome si Internet Explorer, pe cât văd eu.
Pune un DIV container și doi copii DIVs în același nivel, una de conținut, una pentru fundal. Și folosind CSS, auto-dimensiune fundal pentru a se potrivi conținutul și pune fondul de fapt în spate folosind 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>
Pentru un simplu semi-transparent de culoare de fundal, soluțiile de mai sus (CSS 3 sau imagini de fundal) sunt cele mai bune opțiuni. Cu toate acestea, dacă vrei să faci ceva crescator (de exemplu, animație, fundaluri multiple, etc.), sau, dacă nu't doriți să se bazeze pe CSS 3, puteți încerca "panoul tehnica":
.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>
Tehnica funcționează cu ajutorul a două "straturi" în interiorul panoul exterior element:
Anii position: relative la panoul este important; ea spune stratul de spate pentru a se potrivi cu panoul de's de dimensiune. (Dacă aveți nevoie de
tag să fie absolută, schimba panoul din o <p>
a un <interval>
și înfășurați toate că într-un absolut-poziția `
tag.)
Principalul avantaj aceasta tehnica are peste similare cu cele enumerate mai sus este că panoul nu't trebuie să fie o anumită dimensiune; ca codificate de mai sus, se va potrivi full-lățime (normal bloc-element layout) și numai la fel de mare ca și conținutul. Panoul exterior element poate fi de dimensiuni orice fel, te rog, atâta timp cât's dreptunghiulară (de exemplu, inline-block va lucra; simplu-vechi inline nu vor).
De asemenea, vă oferă o mulțime de libertate pentru fundal; te're liber pentru a pune într-adevăr ceva în spate element și nu afectează fluxul de conținut (dacă doriți mai multe full-size sub-straturi, doar asigurați-vă că acestea au, de asemenea, position: absolute, latime/inaltime: 100%, iar partea de sus/jos/stânga/dreapta: auto).
O variantă pentru a permite fundal insertie reglare (prin partea de sus/jos/stânga/dreapta) și/sau fundal fixarea (prin eliminarea una dintre stânga/dreapta sau sus/jos perechi) este de a utiliza următoarele CSS în loc:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
După cum este scris, acest lucru funcționează în Firefox, Safari, Chrome, Internet Explorer 8 (și mai târziu), și Opera, deși Internet Explorer 7 și Internet Explorer 6 necesită un plus de CSS și expresii, IIRC, și ultima dată când am verificat, cel de-al doilea CSS variantă nu funcționează în Operă.
Lucruri pentru a viziona afară pentru:
<div>
s în loc de `Un fuller demo, arată pe flexibilitate de aceasta tehnica, prin utilizarea în tandem cu display: inline-block
, și cu atât "auto" & specifice, lățimea e/`min-înălțime este:
<!-- language: lang-html -->
<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>
<!-- language: lang-css -->
.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); }
Și aici's o live demo de tehnica folosită pe scară largă:
It's mai bine să utilizați un semi-transparent .png
.
Doar deschide Photoshop, de a crea o 2x2
pixel de imagine (iei 1x1` poate provoca un Internet Explorer bug!), umple-l cu o culoare verde și setați opacitatea în "fila Straturi" la 60%. Apoi salvați-l și face o imagine de fundal:
<p style="background: url(green.png);">any text</p>
Este în regulă, desigur, cu excepția minunat Internet Explorer 6. Sunt mai bine fixat disponibile, dar aici's rapid 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');
}
Există un truc pentru a minimiza marcaj: Utilizați un pseudo-element ca fundal și puteți seta opacitatea la ea, fără a afecta elementul principal și copiii săi:
[DEMO][1]
Ieșire:
Relevante cod:
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>
Sprijin Browser-ul este Internet Explorer 8 și mai târziu.
Cea mai simplă metodă ar fi să utilizați un fundal semi-transparent imagine PNG.
Puteți folosi JavaScript pentru a face să funcționeze în Internet Explorer 6 dacă aveți nevoie să.
Eu folosesc metoda descrisă în Png Transparente în Internet Explorer 6.
Afară de asta, ai putea să-l fals, folosind două side-by-side frate elemente - face unul semi-transparent, apoi absolut poziția alte peste partea de sus.
Această metodă vă permite să aveți o imagine în fundal și nu numai o culoare solidă, și poate fi folosit pentru a avea o transparență de pe alte atribute, cum ar fi frontierele. Nici PNG transparent imaginile sunt necesare.
Folosesc:înainte (sau după) în CSS și să le dea valoarea opacității să părăsească element la original opacitate. Astfel, puteți folosi :înainte de a face un faux element și să-l fundal transparent (sau hotarele) pe care doriți și mutați-l în spatele conținutul pe care doriți să păstrați opac cu z-index`.
Un exemplu ([vioara](
)) (rețineți căDIV cu clasa "tata" este doar pentru a oferi un context și un contrast de culori, acest element suplimentar nu este de fapt necesar, și dreptunghiul roșu este mutat un pic în jos și la dreapta pentru a lasa vizibile fundal în spatele
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>
cu această 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;
}
În acest caz .fancyBg:înainte de
are proprietăți CSS doriți să aveți cu transparență (fond roșu în acest exemplu, dar poate fi o imagine sau frontiere). L's poziționat ca absolut să-l mute în spatele .fancyBg
(folosesc valori de zero sau cum este mai potrivit pentru nevoile tale).
Problema este, că textul de fapt a opacitate completă în exemplu. Ea are deplină opacitate în interiorul " p "tag-ul, dar" p " tag-ul este doar semi-transparent.
Ai putea adăuga un semi-transparent PNG imagine de fundal în loc să-și dea seama în CSS, sau separat de text și div în două elemente și pentru a muta textul de pe cutie (de exemplu, marja negativă).
În caz contrar nu va't fi posibil.
Doar ca Chris mi-a spus: dacă utilizați un fișier PNG cu transparență, trebuie să utilizați un JavaScript soluție pentru a face să funcționeze în plictisitor Internet Explorer...
Aproape toate aceste răspunsuri și asume designer vrea un fundal de culoare solida. Dacă proiectantul dorește, de fapt o fotografie ca fundal singura soluție reală la moment este de JavaScript precum jQuery Transify plugin menționat în altă parte.
Ce trebuie să faceți este să se alăture CSS de lucru discuții de grup și să le facă să ne dea un fundal opacitate atribut! Ar trebui să meargă mână în mână cu cele mai multe medii caracteristică.
Aici's cum fac acest lucru (s-ar putea să nu fie optimă, dar merge):
Crea div
care doriți să fie semi-transparent. Dă-o clasa/id. Lăsați-l gol, și închideți-l. Dau un set înălțime și lățime (să zicem, 300 de pixeli de 300 pixeli). Dau o opacitate de 0,5 sau orice vă place, și o culoare de fundal.
Apoi, în mod direct de mai jos că div, de a crea un alt div cu o altă clasă/id. Creați un paragraf în interiorul acestuia, în cazul în care te'll loc de text. Da div
position: relative, și partea de sus: -295px
(ca's negativ 295 pixeli). Da un z-index: 2 pentru o bună măsură, și asigurați-vă că opacitatea este de 1. Stil punctul dumneavoastră cum doriți, dar asigurați-vă că dimensiunile sunt mai mici decât cele din prima div
a se't de preaplin.
Ca's a. Aici's codul:
.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>
Acest lucru funcționează în Mozilla 2.x, dar eu nu't știu despre Internet Explorer.
Aici este un plugin jQuery care va face totul pentru tine, Transify (Transify - un plugin jQuery pentru a aplica cu ușurință transparență / opacitate la un element de fundal).
Am fost difuzate în această problemă în fiecare acum și apoi, așa că am decis să scrie ceva care ar face viața mult mai ușoară. Scenariul este mai mică de 2 KB și necesită doar o singură linie de cod pentru a face să funcționeze, și va ocupa, de asemenea, animarea opacitate de fundal, dacă doriți.
Un timp în urmă, am scris despre asta în Cross Browser-Transparență de Fundal Cu CSS.
În mod bizar Internet Explorer 6 vă va permite pentru a face fundalul transparent și să păstreze text pe partea de sus complet opac. Pentru alte browsere apoi am sugerăm să utilizați un PNG transparent fișier.
Opacitate de fundal, dar nu text are unele idei. Folosi fie o imagine semi-transparent, sau suprapune un element suplimentar.
Dacă ești un Photoshop tip, puteți utiliza, de asemenea:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
În scopul de a face fundal de un element semi-transparent, dar au conținut (text & imagini) dintre elementul opac, aveți nevoie pentru a scrie cod CSS pentru acea imagine, și aveți pentru a adăuga un atribut numit `opacitate cu valoarea minimă.
De exemplu,
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
// Este mai mică valoarea, cu atât mai mult va fi transparent, minereu de valoare mai mică va fi transparenta.
CSS 3 are o soluție simplă de problema ta. Utilizare:
background-color:rgba(0, 255, 0, 0.5);
Aici, `rgba standuri pentru roșu, verde, albastru, și valoarea alfa. Verde valoare este obținută din cauza 255 și jumătate transparența este obținut printr-un 0.5 valoarea alfa.
background-color: rgba(255, 0, 0, 0.5); după cum sa menționat mai sus, este cel mai bun răspuns pur și simplu pune. Să spun folosi CSS 3, chiar și în 2013, nu este simplu, deoarece nivelul de suport de la diverse browsere se schimbă cu fiecare iterație.
În timp ce `culoare de fundal este suportat de toate browserele majore (nu noi la CSS 3) [1] alfa transparența poate fi dificil, mai ales cu Internet Explorer înainte de versiunea 9 și cu culoarea de frontieră de pe Safari înainte de versiunea 5.1. [2]
Folosind ceva de genul Busolă sau SASS poate ajuta cu adevărat de producție și de compatibilitate cross-platform.
[1] W3Schools: CSS background-color Proprietate
[2] Norman's Blog: Browser-ul de Sprijin de Verificare CSS3 (octombrie 2012)
Puteți folosi pur CSS 3: rgba(red, green, blue, alpha)
, unde "alpha" este nivelul de transparență vrei. Nu este nevoie de JavaScript sau jQuery.
Aici este un exemplu:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}