|
19 октября, 2008
 Делая новый дизайн сайта, столкнулся с небольшой проблемкой. Некоторая графика, например кнопки и счётчики, на тёмном фоне сильно выделяется, если они светлые. Немного поразмышляв над этой проблемой, пришёл к выходу – затемнить графику, но не просто в графическом редакторе, а при помощи CSS. Хотя точнее будет сказать не затемнить, а сделать прозрачной 
Вот необходимый для этого код:
opacity:0.2;
-moz-opacity:0.2;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
-khtml-opacity: 0.2;
Но проблема в том, что в Internet Explorer шестой версии не хочет работать hover, т.е. при наведении курсором не происходят никакие действия. Что касается браузеров Opera и Mozilla Firefox, то там никаких багов не замечено.
Вот так выглядит мой код, он затемняет всю графику на 80%.
.counters img {
opacity:0.2;
-moz-opacity:0.2;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
-khtml-opacity: 0.2;
background-color:#f3f1e9;
}
Этот код, затемняет графику при наведении курсором, но не так сильно, а всего лишь на 10 процентов.
.counters img:hover {
opacity:0.9;
-moz-opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-khtml-opacity: 0.9;
background-color:#f3f1e9;
}
Параметры затемнения можете выставлять сами, думаю с этим разберётесь
|
|
|
Комментарии:
спасибо вам огромное!
ваша статья мне очень помогла!
у меня тоже были проблемы с графикой,но я от них наконец-то избавился!
у вас очень полезная информация!
спасибо!
Да спасобо Вам больше, мне тоже помогли.
Большое спасибо, очень полезная инфа.
побольше бы таких статей!!! правда,просто оооооогромное “спасибо”..
все хорошо получилось только вот как решить проблему с ие6 ?
спасибо, давно искал как такую штуку сделать
она частенько встречается на DLE-шных варезниках, а на WP у вас первого вижу
Добавить комментарий
|
