CSS opacitate numai la culoarea de fundal, nu textul de pe ea?

Se pare ca doriți să utilizați un fundal transparent, caz în care ați putea încerca să folosiți rgba() funcția:

`rgba(R, G, B, A)

R (roșu), G (verde) și B (albastru) poate fi <integer>s sau <procentul> modelului, în cazul în care numărul 255 corespunde 100%. A (alfa) poate fi o<număr> între 0 și 1, sau un <procentul>, unde numărul 1 îi corespunde 100% (opacitate completă).

RGBa exemplu

rgba(51, 170, 51, .1) / 10% opac verde / rgba(51, 170, 51, .4) / 40% opac verde / rgba(51, 170, 51, .7) / 70% opac verde / rgba(51, 170, 51, 1) / complet opac verde /

O mic [exemplu][2] arată cum rgba` poate fi folosit.

Din 2018, practic fiecare browser acceptă rgba sintaxa.

Cel mai simplu mod de a face acest lucru este cu 2 divs, 1 cu fundal și 1 cu textul:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

Pentru Mai doar utilizatorii:

Dacă tu nu't vrea să setați culorile folosind RGBA, ci mai degrabă folosind HEX, există soluții.

Ai putea folosi un mixin, cum ar fi:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

Și să-l utilizați, cum ar fi:

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

De fapt, aceasta este ceea ce a a construit în mai Puțin funcția, de asemenea, oferă:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

Vezi https://stackoverflow.com/questions/14860874/how-do-i-convert-a-hexadecimal-color-to-rgba-with-the-less-compiler

Acest lucru va lucra cu orice browser

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

Dacă tu nu't doresc transparență, să afecteze întregul recipient și copiii săi, a verifica această soluție. Trebuie să aveți un poziționate absolut copil cu o relativ părinte poziționat pentru a realiza acest lucru. CSS Opacitate Care nu Afectează Copilul Elemente

Verifica un demo de lucru la CSS Opacitate Care Nu't Afecta "Copii"

Trucul meu este de a crea un mod transparent .png cu culoare și de a folosi background:url().

Am avut aceeași problemă. Vreau un 100% transparent culoare de fundal. Doar folosi acest cod; l's a lucrat mare pentru mine:

rgba(54, 25, 25, .00004);

Puteți vedea exemple pe stânga pe această pagină web (formularul de contact de zona).

O modalitate foarte bună de a face acest lucru ar fi de a utiliza CSS 3 într-adevăr.

A crea un div lățime-o clasă - de exemplu supersizer pe partea de sus a paginii:

Apoi setați următoarele proprietăți CSS:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>

Pentru oricine vine peste acest thread, aici's un script numit thatsNotYoChild.js asta am scris doar că rezolvă această problemă în mod automat:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Practic, se separă copiii de la elementul părinte, dar păstrează element în aceeași locație fizică pe pagina.

Cea mai simplă soluție este de a crea 3 divs. Unul care va conține alte 2, cel cu fundal transparent si una cu conținutul. Face primul div's de poziție relativă și setați una cu fundal transparent pentru a negativ z-index, apoi reglați poziția de conținut pentru a se potrivi pe fundal transparent. În acest fel ai castigat't au probleme cu poziționare absolută.

Utilizare:

background:url("location of image"); // Use an image with opacity

Această metodă va funcționa în toate browsere.

Puteți't. Trebuie să ai o separat div că este doar faptul că de fundal, astfel încât să puteți aplica doar opacitatea la asta.

Am încercat să fac acest lucru recent, și din moment ce am fost deja folosind jQuery, am găsit următoarele să fie cel puțin hassle:

1. Crea două tipuri diferite de divs. Ei'll fi frați, care nu sunt conținute în fiecare alte sau nimic.
2. Da text div-o culoare de fundal solid, pentru că va fi JavaScript-mai puțin implicit.
3. Utilizarea jQuery pentru a obține "text" div's înălțime, și se aplică la "background" div.

Am'm sigur că nu's un fel de CSS ninja mod de a face toate acestea cu doar pluteste sau ceva, dar n-am't au răbdare să-l dau afară.