Potrzebuję półprzezroczystego elementu div, który powoduje wyświetlenie tekstu nad miniaturą obrazu? Czy można to zrobić bez JavaScriptu i używając tylko kaskadowego arkusza stylów?CSS3: Użyj zdarzenia po najechaniu kursorem, aby ustawić półprzezroczystą nakładkę na obrazku
Można spróbować czegoś takiego:
<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
<div class="overlay"></div>
<img src="image.gif" />
</div>
zależności od tego co robisz z miniaturki, można ustawić tło div jako obrazu, to tekst i użyć CSS, aby przełączyć widoczność z przezroczystego do stałego na zawisie.
This'd działają tylko czysto jeśli masz miniaturę wiadomo-size (bo trudno na automatyczną zmianę rozmiaru div do wielkości jego obraz tła), ale będzie to zrobić za pomocą prostego rozwiązania w HTML:
<div class="thumb" style="background-image: url(thumb.jpg);">
<p>mouseover text</p>
</div>
ważne css byłoby coś takiego ...
div.thumb p { visibility: hidden; }
div.thumb:hover p { visibility: visible; }
Nie wiesz, z pytaniem, czy cały div ma być przezroczysty lub tylko tekst, ale można zastosować odpowiedni CSS na albo poziom.
Wszystko w porządku, jeśli chodzi o wyświetlanie - ale nie dbasz o semantykę tutaj. Znacznik img może zawierać inne użyteczne atrybuty, takie jak tekst altowy, szerokość i wysokość (które również będą renderowane szybciej) oraz wszelkie inne zachowania, których możesz potrzebować, a także odciąć użytkowników za pomocą czytników ekranu, ponieważ nie będą wiedzieli, do czego służą. patrzę na. – easwee
Dlatego właśnie powiedziałem "w zależności od tego, co robisz", choć przyznaję, że nie wyrażałem się wystarczająco jasno, z mojego kontekstu wynika, że tekst jest ważniejszy niż obraz, w którym to przypadku może to być reasonab le podejście. –
Ok ok wiem, że to jest stary, ale wpadłem i mają coś do dodania o nieprzejrzystości ustawień
http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
podać, że wyglądają na uważam za pomocą rgba gdy kiedykolwiek możliwe nad kryciem procuces znacznie lepszy wynik, nieprzezroczystość może działać dziwnie w różnych przeglądarkach i powodować wszystkie problemy z asysty ... tylko moje 2 centy
Świetnie, dzięki za to działa świetnie! A co z IE? Rozumiem, że to nie zadziała? :-( –
Użyj krycia filtra: http://doctyper.com/archives/200703/cross-browser-opacity/ –
Właściwie nie musisz używać do tego komentarzy warunkowych, ponieważ przeglądarka po prostu zignoruje regułę css selektor taki jak ten http://snipplr.com/view/10094/crossbrowser-opacity/ powinien załatwić sprawę: – easwee