Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   gradiend и background-image (https://javascript.ru/forum/xhtml-html-css/30763-gradiend-i-background-image.html)

svs_js 14.08.2012 22:08
gradiend и background-image
 
Всем привет :)
Есть <input type="button" />

Для него в цссе задан градиент, скругления и т д :)
И нужно поверх градиента наложить картинку в виде маленькой стрелочки.
Не могу найти правильное решение. В случае, если б кнопка была Дивом, это без проблем с помощью шейпов, а вот с инпутом такая ситуация не проходит :) Кто что думает по этому поводу ?

devote 14.08.2012 23:53 
<style>
    input {
        background-image:
            url('http://javascript.ru/forum/images/smilies/smile.gif'),
            -o-linear-gradient( left, #ff0, #00f );

        background-image:
            url('http://javascript.ru/forum/images/smilies/smile.gif'),
            -ms-linear-gradient( left, #ff0, #00f );

        background-image:
            url('http://javascript.ru/forum/images/smilies/smile.gif'),
            -webkit-linear-gradient( left, #ff0, #00f );

        background-image:
            url('http://javascript.ru/forum/images/smilies/smile.gif'),
            -moz-linear-gradient( left, #ff0, #00f );

        background-image:
            url('http://javascript.ru/forum/images/smilies/smile.gif'),
            linear-gradient( left, #ff0, #00f );

        background-repeat: no-repeat;
        background-position: 0 center;
        width: 200px;
        height: 100px;
    }
</style>
<input type="button" value="Жми" />

svs_js 15.08.2012 00:14
даа, спасибо :)

svs_js 28.08.2012 17:11
к сожалению, данная конструкция не работает в ИЕ. Версия 9+

devote 28.08.2012 21:18
Цитата:
Сообщение от svs_js
в ИЕ. Версия 9+
само собой, потому что в ИЕ9 нет градиентов.

svs_js 29.08.2012 00:44
да, но ведь у нас есть вот что

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */


а в сочетании с картинкой для ие 6-9 не получается :) версии 6-8 меня не интересуют, а вот 9 хотелось бы сделать.. так как не знаю, как сочитать filter с background-image :)

devote 29.08.2012 01:41
юзайте SVG

svs_js 29.08.2012 10:19
в таком случае проще было б Дивами все сделать. а SVG ..... Мы ж не будем иметь Инпут.. нужно добавлять новый тег.. тег Object. Что нельзя в данном случае.

wawandas 29.08.2012 11:16
может PIE.htc выручит

Deff 29.08.2012 11:36
:) Проще поставить фон картинкой с заранее сделанным градиентом и использовать background-size: 100% 100%;
http://htmlbook.ru/css/background-size

Deff 29.08.2012 11:52 
<style>
    span.input {
    	display:inline-block;
        background-image:
            url('http://s1.uploads.ru/i/71qdN.png');


        background-repeat: no-repeat;
        background-position: 0 center;
        background-size: 100% 100%;
    }
input {
        color: #fff;
        font-size: 16px;
        font-weight:700;
        background-color: transparent;
        background-image:
            url('http://javascript.ru/forum/images/smilies/smile.gif');
        background-repeat: no-repeat;
        background-position: 0 center;
        width: 120px;
        height: 30px;
</style>
<span class="input"><input type="button" value="Жми" /><span>

svs_js 29.08.2012 12:10
не совсем подходит такой вариант :)
градиент в моем случае должен быть градиентом, а не картинкой ( я бы давно уже так сделал бы

Deff 29.08.2012 12:21
svs_js,
Чисто любопытство - в чем проблема с картинкой - она же растянута ?

И по вертикали и по горизонту

devote 29.08.2012 13:33
Deff,
зачем картинка? SVG можно использовать как картинку, так же задавая ее через data:URI, проблема лишь в том что он не сможет ипользовать множественное количество картинок в ИЕ9, потому что он не поддерживает эту возможность.

devote 29.08.2012 13:37
вот онлайн конструктор CSS3 градиентов для всех браузеров http://www.colorzilla.com/gradient-editor/

Aetae 29.08.2012 17:18
Братюни, а почему бы не использовать <button> и не парить мозги?


Часовой пояс GMT +3, время: 13:42.