Krycie CSS tylko do koloru tła, a nie tekstu na nim? [duplikat]

Najprostszym sposobem na to jest użycie 2 divów, 1 z tłem i 1 z tekstem:

#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>

To będzie działać z każdą przeglądarką

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; 
}

Jeśli nie chcesz, aby przezroczystość miała wpływ na cały kontener i jego dzieci, sprawdź to obejście. Musisz mieć absolutnie ustawione dziecko ze względnie ustawionym rodzicem, aby to osiągnąć. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Sprawdź demo robocze na http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Dla Mniej tylko użytkowników:

Jeśli nie lubisz ustawiać kolorów za pomocą RGBA, ale raczej za pomocą HEX, istnieją rozwiązania.

Przydałby się mixin w stylu:

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

I używaj go jak

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

Właściwie to jest to, co wbudowana funkcja LESS również zapewnia:

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

Zobacz Jak przekonwertować kolor HEX NA rgba przy użyciu mniejszego kompilatora?

Moja sztuczka polega na stworzeniu przezroczystego .png z kolorem i użyciem background:url().

Miałem ten sam problem. Chcę 100% przezroczystego koloru tła, po prostu użyj tego kodu, jego praca jest dla mnie świetna: {]}

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

Przykłady można zobaczyć po lewej stronie na tej stronie (obszar formularza kontaktowego)

Świetnym sposobem na to byłoby użycie CSS3.

Utwórz klasę o szerokości div-np. supersizer na górze strony:

Następnie ustaw następujące właściwości 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>

Dla wszystkich, którzy natknęli się na ten wątek, oto skrypt o nazwie thatsNotYoChild.js że właśnie napisałem że rozwiązuje ten problem automatycznie:

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

Zasadniczo oddziela dzieci od elementu nadrzędnego, ale utrzymuje element w tej samej fizycznej lokalizacji na stronie.

Najprostszym rozwiązaniem jest utworzenie 3 divs. Jeden, który będzie zawierał pozostałe 2, ten z przezroczystym tłem i ten z zawartością. Ustaw pozycję pierwszego div jako względną i ustaw tę z przezroczystym tłem na ujemną z-index, a następnie dostosuj pozycję zawartości, aby pasowała do przezroczystego tła. W ten sposób nie będziesz miał problemów z pozycjonowaniem absolutnym.

Użyj

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

Ta metoda będzie działać we wszystkich przeglądarkach

Nie możesz. musisz mieć oddzielny div, który jest tylko tym tłem, więc możesz zastosować tylko krycie do tego.

Próbowałem to zrobić niedawno, a ponieważ używałem już jQuery, uznałem, że następujące czynności są najmniej kłopotliwe:

1. utwórz dwa różne div. Będą rodzeństwem, nie będą w sobie zawarte.
2. daj text div jednolity kolor tła, ponieważ będzie to domyślna wartość bez JS.
3. Użyj jQuery, aby uzyskać text wysokość div I zastosować go do background div.

Jestem pewien, że jest jakiś sposób CSS ninja, aby zrobić to wszystko tylko z pływakami lub coś, ale nie miałem cierpliwości, aby to rozgryźć.