Сером Фоне Небольшие Изображения
Я много искал в интернете, но я не могу найти кросс-браузерное решение для выцветания изображения CSS backgrund в оттенки серого и обратно.
единственное рабочее решение-применить CSS3 фильтр оттенков серого:
-webkit-filter: grayscale(100%);
но это работает только с Chrome V. 15+ и Safari V. 6+ (как вы можете видеть здесь:http://css3.bradshawenterprises.com/filters/)
многие страницы в интернете говорят об этом решении для серых элементов:
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
(как вы можете видеть here:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
но на самом деле он не работает для фоновых изображений css, как это делает фильтр webkit.
есть ли какое-либо решение (может быть, с jquery?) чтобы взломать этот недостаток поддержки фильтра на менее продвинутых браузерах?
4 ответа:
вот так:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>bluantinoo CSS Grayscale Bg Image Sample</title> <style type="text/css"> div { border: 1px solid black; padding: 5px; margin: 5px; width: 600px; height: 600px; float: left; color: white; } .grayscale { background: url(yourimagehere.jpg); -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); } .nongrayscale { background: url(yourimagehere.jpg); } </style> </head> <body> <div class="nongrayscale"> this is a non-grayscale of the bg image </div> <div class="grayscale"> this is a grayscale of the bg image </div> </body> </html>протестировал его в FireFox, Chrome и IE. Я также приложил изображение, чтобы показать мои результаты моей реализации этого.
EDIT: кроме того, если вы хотите, чтобы изображение просто переключалось назад и вперед с помощью jQuery, вот источник страницы для этого...Я включил веб-ссылку на jQuery и изображение, которое находится в сети, поэтому вы должны просто скопировать / вставить, чтобы проверить его:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>bluantinoo CSS Grayscale Bg Image Sample</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <style type="text/css"> div { border: 1px solid black; padding: 5px; margin: 5px; width: 600px; height: 600px; float: left; color: white; } .grayscale { background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg); -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); } .nongrayscale { background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg); } </style> <script type="text/javascript"> $(document).ready(function () { $("#image").mouseover(function () { $(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1); }); $("#image").mouseout(function () { $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1); }); }); </script> </head> <body> <div id="image" class="nongrayscale"> rollover this image to toggle grayscale </div> </body> </html>EDIT 2 (для IE10-11 Пользователи): решение выше не будет работать с изменениями, которые Microsoft внесла в браузер в последнее время, поэтому вот обновленное решение, которое позволит вам изменять оттенки серого (или обесцвечивать) ваши изображения.
<svg> <defs> <filter xmlns="http://www.w3.org/2000/svg" id="desaturate"> <feColorMatrix type="saturate" values="0" /> </filter> </defs> <image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" /> </svg>
используя текущие браузеры вы можете использовать его следующим образом:
img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }и чтобы исправить это:
img:hover{ -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); }работали со мной и гораздо короче. Существует еще больше можно сделать в CSS:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();для получения дополнительной информации и поддержки браузеров см. Это:http://www.w3schools.com/cssref/css3_pr_filter.asp
вам не нужно использовать сложное кодирование на самом деле!
Оттенки Серого Ховер:
- webkit-фильтр: оттенки серого (100%);
оттенки серого "Hover-out":
- webkit-фильтр: оттенки серого(0%);
Я просто сделал мой класс css иметь отдельный класс наведения и добавил во второй оттенки серого. Это очень просто, если вы действительно не любите сложности.