Затемнение картинки при наведении

@Ceргeй · Регистрация: 21.01.2011

Студворк — интернет-сервис помощи студентам

Приветствую!
Есть код 'Затемнение картинки при наведении'

CSS
1
2
3
4
5
6
7
8
img:hover {
opacity:0.7; /* FF, Opera, Safari, Chrome */
}
 
img:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* IE7 */
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); /* IE8, хотя несмотря на заверения майкрософт вроде как и предыдущий вариант в 8-м работает - filter:prodig:... */
}

т.в. этот код затемняет картинку, если на сайте темный фон, а если белый фон сайта, то картинку осветляет и делает бледной.
Как можно сделать, чтобы на белом фоне сайта картинка тоже затемнялась, как и на черном фоне сайта, т.е. сделать код, который не смотрит на фон сайта и на любом из фонов сайта, белый или какой другой, только затемнялась картинка.

Если кто знает, то прошу подсказать. Спасибо.

@Grey · 07.04.2011, 19:11

Сообщение от Ceргeй

этот код затемняет картинку, если на сайте темный фон, а если белый фон сайта, то картинку осветляет и делает бледной.

Этот код делает картинку полупрозрачной. Посмотри opacity
Не знаю как делать чтоб всегда темнела.

@Ceргeй · 07.04.2011, 19:22 **[ТС]**

Сообщение от Grey

Этот код делает картинку полупрозрачной. Посмотри opacity
Не знаю как делать чтоб всегда темнела.

буду в курсе. За информацию Спасибо.

Добавлено через 44 секунды
Вопрос открыт. Имея в виду, какой другой вариант затемнения.

@ixapek · 07.04.2011, 19:24

Ceргeй, Grey прав, ваш код меняет прозрачность, поэтому на темном кажется темнее, на светлом светлее.
Я обычно делаю так: в фотошопе (или другом удобном редакторе) делаю рисунок 1X1px, заливаю его черным цветом и выставляю прозрачность где-то 50-70%. Сохраняю в .png.

Реализация 1:

HTML:

HTML5
1
2
3
<div class="imgcontainer">
<div></div>
</div>

CSS:

CSS
1
2
3
4
5
6
.imgcontainer{
background:url(img.jpg) no-repeat;
}
.imgcontainer:hover div{
background:url(one_px.png) repeat;
}

Примерно так. Ну ширину и высоту всем блокам не забыть задать главное

Реализация 2:

HTML:

HTML5
1
2
3
4
<div class="imgcontainer">
<img src="img.jpg">
<div></div>
</div>

CSS:

CSS
1
2
3
4
5
6
7
.imgcontainer div{
position:relative;
top:-*высота картинки*px;
}
.imgcontainer:hover div{
background:url(one_px.png) repeat;
}

@Ceргeй · 07.04.2011, 19:31 **[ТС]**

ixapek Спасибо огромное за идею и сам код!

@ixapek · 07.04.2011, 19:36

Ceргeй, пожалуйста... Кстати, коль уж решили использовать opacity, можно свойство

CSS
1
background:url(one_px.png) repeat;

заменить на

CSS
1
2
background:#000;
opacity:0.3 /*Ну или сколько там надо*/;

@Grey · 07.04.2011, 20:35

Можно еще с 2 картинками, вторая показывается при наведении курсора. Png не желательно использовать, тяжёлые.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 <head>
  <title>Сайт</title>   
 
   <style type="text/css"><!--
   IMG {
    background-image: url("sun1.gif"); /* Путь к файлу с исходным рисунком  */
   }
   IMG:hover {
    background-image: url("sun2.gif"); /* Путь к файлу с заменяемым рисунком  */
    }
  --></style>
 
</head>
 
<body>
<img src="" border="0" height="60px" width="80px" alt="не загрузилось">
</body>
</html>

@Ceргeй · 07.04.2011, 22:17 **[ТС]**

Сообщение от ixapek

Ceргeй, пожалуйста... Кстати, коль уж решили использовать opacity, можно свойство

CSS
1
background:url(one_px.png) repeat;

заменить на

CSS
1
2
background:#000;
opacity:0.3 /*Ну или сколько там надо*/;

может браузер не поддерживает, но у меня показывает бледную прозрачность вместо темноты, т.е. затемнения.

Добавлено через 13 минут

Сообщение от Grey

Можно еще с 2 картинками, вторая показывается при наведении курсора. Png не желательно использовать, тяжёлые.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 <head>
  <title>Сайт</title>   
 
   <style type="text/css"><!--
   IMG {
    background-image: url("sun1.gif"); /* Путь к файлу с исходным рисунком  */
   }
   IMG:hover {
    background-image: url("sun2.gif"); /* Путь к файлу с заменяемым рисунком  */
    }
  --></style>
 
</head>
 
<body>
<img src="" border="0" height="60px" width="80px" alt="не загрузилось">
</body>
</html>

Спасибо огромное за вариант, но у меня DLE и прописать такой код наверное не получится никак,
т.к. нужно чтобы код влиял на картинки в кратких новостях.

@ixapek · 08.04.2011, 10:15

Grey, а как Вы думаете, зачем я так длинно расписывал процесс подготовки .png? В итоге получается не более 10kb. Поверьте, метод второй картинки будет в разы тяжелее

. А чтоб их норм ослик 6 кушал, можно хак прописать.

@ZvEr-HaCkEr · 09.04.2011, 08:07

Юзать тег canvas.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Ceргeй 1 / 1 / 0 Регистрация: 21.01.2011 Сообщений: 112
	07.04.2011, 19:31 [ТС]
	ixapek Спасибо огромное за идею и сам код! 0

@ixapek 15 / 14 / 2 Регистрация: 18.05.2010 Сообщений: 118
	08.04.2011, 10:15
	Grey, а как Вы думаете, зачем я так длинно расписывал процесс подготовки .png? В итоге получается не более 10kb. Поверьте, метод второй картинки будет в разы тяжелее . А чтоб их норм ослик 6 кушал, можно хак прописать. 1

@ZvEr-HaCkEr 2 / 2 / 0 Регистрация: 09.04.2011 Сообщений: 16
	09.04.2011, 08:07
	Юзать тег canvas. 1