Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2010, 01:48
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

Как с помощью стилей сделать изображение темнее
Пишу веб-приложение, в котором требуется затемнять некоторые изображения. До этого справлялся тем, что фон под изображениями был тёмным, и изображения затемнялись прописыванием им opacity<1. Но сейчас столкнулся с тем, что затемнённые изображения могут перекрывать друг друга, и, если продолжать использовать этот метод для затемнения, изображения просвечивают сквозь друг друга.

Подскажите способ затемнить изображение с помощью стилей, желательно без создания дополнительных элементов.

Вариант перекрывать изображения полупрозрачным чёрным div'ом не подходит. Нарисовать каждое изображение в двух вариантах - тёмном и нормальном - тоже не подходит.

Гугл не помог, последняя надежда на вас.
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2010, 02:13
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от Cooskon
Но сейчас столкнулся с тем, что затемнённые изображения могут перекрывать друг друга, и, если продолжать использовать этот метод для затемнения, изображения просвечивают сквозь друг друга.
background-color
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2010, 02:28
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

Сообщение от Gvozd Посмотреть сообщение
background-color
Не помогает. Через полупрозрачное изображение всё равно видно изображение под ним.
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2010, 02:38
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

<style>
body {
   background: #fff;
}
.image {
   position: absolute;
   width: 336px;
   height: 76px;
   background: #fff;
}
#img1 {
   top: 0;
   left: 0;
}
#img2 {
   top: 38px;
   left: 168px;
}
.image img {
   vertical-align: top;
   opacity: 0.3;
}
.image img:hover {
   opacity: 1;
}
</style>
<div class="image" id="img1"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="…" width="336" height="76"></div>
<div class="image" id="img2"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="…" width="336" height="76"></div>

Последний раз редактировалось Octane, 23.08.2010 в 02:41.
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2010, 22:20
Аватар для Cooskon
Интересующийся
Отправить личное сообщение для Cooskon Посмотреть профиль Найти все сообщения от Cooskon
 
Регистрация: 15.01.2010
Сообщений: 28

Увы, Octane, такой способ не подходит, я о нём тоже думал.

Таким образом, затемнить изображение, используя только стили на элементе самого изображения, по-видимому, нельзя (Эксплореровкие фильтры не в счёт). А жаль.
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2010, 22:53
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Меня аж минут на двадцать подвесила эта задачка. Боюсь, что голым css тут не обойтись.
img:before не покатит, т. к. img не контейнер и генерируемого содержания у него в помине быть не может. Из svg для этих целей дёрнуть нечего. Xslt - из пушки по воробьям.
Ответить с цитированием
  #7 (permalink)  
Старый 26.08.2010, 00:16
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

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

А жаль.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такое fancy menu uonax Элементы интерфейса 2 22.05.2010 12:52
30(1|2) редирект от сервера. Или как лучше сделать редирект при верной отсылке форма. pizzZ AJAX и COMET 2 18.02.2010 09:06
Как предварительно загруженное изображение сделать бэкграундом? hrundel Общие вопросы Javascript 1 02.08.2009 12:45
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24