Градиент + картинка у кнопки(css3)

[Serpanok]

Всем привет!

Есть кнопка input[type=submit] её нужно добавить градиент из #DB261D в #C4130D и также добавить картинку ../images/zoom.png

Градиент пробовал так:

    background-image: -webkit-gradient(linear, left top, left bottom, from(#DB261D), to(#C4130D));
    background-image: -webkit-linear-gradient(top, #DB261D, #C4130D);
    background-image:    -moz-linear-gradient(top, #DB261D, #C4130D);
    background-image:     -ms-linear-gradient(top, #DB261D, #C4130D);
    background-image:      -o-linear-gradient(top, #DB261D, #C4130D);
    background-image:         linear-gradient(top, #DB261D, #C4130D);

но если добавляю после этого строку

background-image:url(../images/zoom.png);

картинка не появляется!

Как это можно исправить? Заранее всем спасибо!

[daredevi1]

  Quote

background-image:url(../images/zoom.png);

Все правильно. Последнее свойство перебьет предыдущее. Я бы сделал так. Создаешь div. На него градиент. Потом внутри этого блока создаешь еще один, с нужной тебе картинкой на бэкграунде. Ну и еще + задаешь псевдоклассы :active и :hover для большей схожести с кнопками

[klierik]

  On 12/5/2011 at 1:55 PM, daredevi1 said:

  Quote

background-image:url(../images/zoom.png);

Все правильно. Последнее свойство перебьет предыдущее. Я бы сделал так. Создаешь div. На него градиент. Потом внутри этого блока создаешь еще один, с нужной тебе картинкой на бэкграунде. Ну и еще + задаешь псевдоклассы :active и :hover для большей схожести с кнопками

если уж использовать CSS3 то какого надо юзать вложенный элемент?

И ничего не правильно! не путай топикстартера.

2 автор

вот пример:

background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image:    url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image:     url(IMAGE_URL), -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image:      url(IMAGE_URL), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image:         url(IMAGE_URL), linear-gradient(top, #444444, #999999); /* W3C */

подробнее тут

а это в помощь http://css3please.com/

[Serpanok]

  On 12/6/2011 at 9:32 AM, klierik said:

  On 12/5/2011 at 1:55 PM, daredevi1 said:

  Quote

background-image:url(../images/zoom.png);

Все правильно. Последнее свойство перебьет предыдущее. Я бы сделал так. Создаешь div. На него градиент. Потом внутри этого блока создаешь еще один, с нужной тебе картинкой на бэкграунде. Ну и еще + задаешь псевдоклассы :active и :hover для большей схожести с кнопками

если уж использовать CSS3 то какого надо юзать вложенный элемент?

И ничего не правильно! не путай топикстартера.

2 автор

вот пример:

background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image:    url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image:     url(IMAGE_URL), -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image:      url(IMAGE_URL), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image:         url(IMAGE_URL), linear-gradient(top, #444444, #999999); /* W3C */

подробнее тут

а это в помощь http://css3please.com/

что то нифига, только градиент отображается, а картинки нет (((

пробовал и так

background-image: url(../images/print.png); /* fallback */
	background-image: url(../images/print.png), -webkit-gradient(linear, left top, left bottom, from(#DB261D), to(#C4130D)); /* Saf4+, Chrome */
	background-image: url(../images/print.png), -webkit-linear-gradient(top, #DB261D, #C4130D); /* Chrome 10+, Saf5.1+ */
	background-image:    url(../images/print.png), -moz-linear-gradient(top, #DB261D, #C4130D); /* FF3.6+ */
	background-image:     url(../images/print.png), -ms-linear-gradient(top, #DB261D, #C4130D); /* IE10 */
	background-image:      url(../images/print.png), -o-linear-gradient(top, #DB261D, #C4130D); /* Opera 11.10+ */
	background-image:         url(../images/print.png), linear-gradient(top, #DB261D, #C4130D); /* W3C */

и так

background-image:url(../images/print.png); /* fallback */
	background-image:-webkit-gradient(linear, left top, left bottom, from(#DB261D), to(#C4130D)), url(../images/print.png); /* Saf4+, Chrome */
	background-image:-webkit-linear-gradient(top, #DB261D, #C4130D), url(../images/print.png); /* Chrome 10+, Saf5.1+ */
	background-image:-moz-linear-gradient(top, #DB261D, #C4130D), url(../images/print.png); /* FF3.6+ */
	background-image:-ms-linear-gradient(top, #DB261D, #C4130D), url(../images/print.png); /* IE10 */
	background-image:-o-linear-gradient(top, #DB261D, #C4130D), url(../images/print.png); /* Opera 11.10+ */
	background-image:linear-gradient(top, #DB261D, #C4130D), url(../images/print.png); /* W3C */