jest sposób na osiągnięcie tego efektu w sposób kompatybilny z różnymi przeglądarkami bez konieczności przygotowywania oddzielnych obrazów?Osiągnięcie efektu białego nieprzezroczystości w html/css
Zasadniczo rama, na której leży tekst, ma białą nakładkę o 50% nieprzezroczystości .. Chciałbym rozwiązanie, które nie wymaga tworzenia żadnego innego obrazu oprócz tła, ale nie wiem, czy to możliwe!
Spróbuj RGBA np
div { background-color: rgba(255, 255, 255, 0.5); }
Jak zwykle, nie będzie działać w każdej przeglądarce, jaką kiedykolwiek napisano.
działa, ale nie jest kompatybilny z IE, więc musiałem użyć obrazu tła o wielkości 1 piksela z 50% alfa. Dzięki i tak :) – Jack
Jeśli nie możesz użyć rgba ze względu na obsługę przeglądarki i nie chcesz dołączać półprzezroczystego białego PNG, musisz utworzyć dwa pozycjonowane elementy. Jeden dla białego pudełka, z nieprzezroczystością i jeden dla nakładanego tekstu, stały.
body { background: red; }
.box { position: relative; z-index: 1; }
.box .back {
position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }
body.browser-ie8 .box .back { filter: alpha(opacity=75); }<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
<div class="box">
<div class="back"></div>
<div class="text">
Lorem ipsum dolor sit amet blah blah boogley woogley oo.
</div>
</div>
</body>
możliwe duplikat [CSS: Stylizacji odwiedził obrazy Drogi Krzyżowej przeglądarka/cross krycie przeglądarka] (http://stackoverflow.com/questions/1438671/css-styling-visited-images-cross-browser -widoku-cross-przeglądarki-nieprzezroczystości) –
Zobacz duplikat. Będziesz musiał umieścić czarny tekst w oddzielnym DIV chociaż –
, ale pamiętaj, że filtry dla IE6 to tak naprawdę zasysacze zasobów (z których prawdopodobnie IE6 Workstation nie ma wiele do stracenia). – Hannes