Как сделать картинку прозрачной средствами CSS?
Здравствуйте!
Имеется некоторая страничка, у которой имеется фон, который является картинкой. На этой странице размещаются картинки (<img src..). Вот нужно сделать, чтобы эти картинки были прозрачными, т.е. чтобы через них просматривался фон.
Это необходимо реализовать хотя бы в IE, т.е. как я понимаю с помощью фильтров.
Как такую задачу можно решить?
Заранее спасибо!
Имеется некоторая страничка, у которой имеется фон, который является картинкой. На этой странице размещаются картинки (<img src..). Вот нужно сделать, чтобы эти картинки были прозрачными, т.е. чтобы через них просматривался фон.
Это необходимо реализовать хотя бы в IE, т.е. как я понимаю с помощью фильтров.
Как такую задачу можно решить?
Заранее спасибо!
Мне кажется что для начала неплохо было бы саму картинку сделать прозрачной на сколько нужно, ну в фотошопе например ) и потом вставить как гиф или пнг. Или я чет не так понял?
В смысле? Да, картинка в гифе прозрачная, но прозрачность только в области где пустое пространство, а на самой картинке прозрачности нет.
:)
Грубо говоря, мне надо, чтобы под одной картинкой было видно другую.
:)
:)
Грубо говоря, мне надо, чтобы под одной картинкой было видно другую.
:)
в CSS3 есть свойство 'opacity'.
Непрозрачная картинка
Полупрозрачная и т.д. Чем меньше число, тем прозрачнее. НО! Теперь буду портить настроение - это свойство поддерживается браузерами IE7, Opera 9 и остальными новыми.
Вариант 2: JavaScript. Как делается - не знаю, пока не нужно было.
Код:
.img { opacity: 1.0 }
Непрозрачная картинка
Код:
.img { opacity: 0.5 }
Полупрозрачная и т.д. Чем меньше число, тем прозрачнее. НО! Теперь буду портить настроение - это свойство поддерживается браузерами IE7, Opera 9 и остальными новыми.
Вариант 2: JavaScript. Как делается - не знаю, пока не нужно было.
Однозначно тут сохранение картинки в PNG формате. Однако учитывая идиотизм MS и кривую поддежку PNG в IE (по крайней мере в 6-ой версии, как там в 7-ой не знаю, но зная MS думается, что все так же плохо), этот метод не самый приемлемый. Значит PNG + фильры и хаки под IE. Нормальные то браузеры PNG поймут как положено.
Не нормальные браузеры, а просто браузеры. По поводу ослика я уже высказывался.
PS IE != браузер.
PS IE != браузер.
Цитата: Dinamit
в CSS3 есть свойство 'opacity'.
Полупрозрачная и т.д. Чем меньше число, тем прозрачнее. НО! Теперь буду портить настроение - это свойство поддерживается браузерами IE7, Opera 9 и остальными новыми.
Вариант 2: JavaScript. Как делается - не знаю, пока не нужно было.
Код:
.img { opacity: 0.5 }
Полупрозрачная и т.д. Чем меньше число, тем прозрачнее. НО! Теперь буду портить настроение - это свойство поддерживается браузерами IE7, Opera 9 и остальными новыми.
Вариант 2: JavaScript. Как делается - не знаю, пока не нужно было.
Кросс браузерная прозрачность:
Код:
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Работает в IE 6, но не валидно :(
Цитата: skywalker
Кросс браузерная прозрачность:
Работает в IE 6, но не валидно :(
Работает в IE 6, но не валидно :(
:D ну тут либо "кроссбраузерность" либо "работает только в IE" .
IE поддерживает прозрачность PNG, просто когда рисуете картинку в шопе, Режимы - Индексированные цвета. Весить, правда, будет чуточку больше.