Как заменить картинку на градиент посредством CSS?

Question

[istasiik]

Здравствуйте! Есть вот такие классы в CSS, которые накладывают картинку-градиент поверх текста.

div.shadow-dialog { position:fixed;top:90px; left:0; width:100%; bottom:60%; z-index:2; }
div.shadow-dialog img { height:100%; position:absolute;top:0; left:0;width:100%;}

Вызывается она в html вот так вот

<div class="shadow-dialog"><img alt="" src="img/shadow.png"></div>

Как вместо картинки использовать градиент созданный с помощью чистого CSS? Градиент от белого непрозрачного до белого прозрачного.

Answer 1

[vdem]

1. В браузере (это та программа, через которую Вы заходите в интернет) открываете страницу google.com (вверху в окне браузера есть поле для ввода адреса страницы, которую Вы хотите открыть).
2. В поле ввода (посередине открывшейся страницы) вводите фразу "Как заменить картинку на градиент посредством CSS?".
3. Теперь нажмите кнопку "Поиск в Google". Должен появиться список страниц, где Вы найдете ответы на Ваш вопрос.

Comments

[Виталий Киренков]

есть способ попроще =))
lmgtfy.com/?q=css+%D0%B3%D1%80%D0%B0%D0%B4%D0%B8%D...

[vdem]

@DeLaVega Черт, не знал :D

[Виталий Киренков]

@vdem древняя штука на самом деле =))

[Юрий Лобанов]

@DeLaVega зато здесь с душой, давай я поищу в гугле за тебя как-то приелось :)

[istasiik]

@vdem да ладно вам xD

Answer 2

[Виталий Киренков]

.gradient {
	background: -moz-linear-gradient(top, transparent 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
	background: -o-linear-gradient(top, transparent 0%, #ffffff 100%);
	background: -ms-linear-gradient(top, transparent 0%, #ffffff 100%);
	background: linear-gradient(top, transparent 0%, #ffffff 100%);
}

Comments

[istasiik]

Спасибо вам большое! Только градиент отображается вот так imgur.com/317f6Kb В чем может быть проблема? Фон белый

[Виталий Киренков]

Не совсем понятно по скрину честно говоря... Вы сделайте вместо img - div. Стили оставьте те же, что и на img были, и просто допишите ещё то, что я написал. Если опять что то не так будет. Выложите код куда нить, или скрин нормальный, а то у вас сливается всё и не понятно...

[istasiik]

@DeLaVega Все, спасибо, уже разобрались ;-)

[Виталий Киренков]

@istasiik Ну и чудно =)

Answer 3

[Денис Инешин]

На будущее, генератор градиентов на CSS