Добавление изображений при использовании CSS-градиентов?

Question

Я пытаюсь создать кнопку, используя CSS Gradients плюс значок, который идет поверх градиента. Я пробовал 2 способа, и оба были неудачными.

Во-первых:

.btn {
    background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));
    background: url(../images/btn.png);
}

Я должен был знать, что не будет работать! Но я также слышал о множественных фоновых изображениях CSS3, поэтому попробовал так.

Второй:

.btn {
        background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png);
    }

Все еще не работает :(. Есть ли способ на самом деле сделать это? С добавлением тега <img> в <button>?

Answer 1

только браузеры webkit допускают несколько фоновых эффектов (CSS3). Вообще говоря, вы можете иметь градиент ИЛИ и изображение, но вы не можете иметь оба (пока)

Вы можете наложить 2 деления, и изображение для самого верхнего будет прозрачным PNG или чем-то подобным

Answer 2

Привет всем :) Я уже некоторое время пытаюсь использовать технику png transparancy Layering / CSS3 градиента и для всех браузеров это выглядит наиболее надежно:

• background: url(images / bkgd1.png) верхний центральный повтор-x, url (images / bkgd2.png) верхний правый повтор-x, -moz-linear-градиент (вверху, # F3F704 0%, #FFFFFF 100%);

• фон: url (images / bkgd1.png) верхний центр повтора-x, url (images / bkgd2.png) верхний правый повтор -x, -webkit-градиент (линейный, левый)вверху, слева внизу, остановка цвета (0%, # F3F704), остановка цвета (100%, # FFFFFF));

Надеюсь, это поможет любому, даже если только один человектогда я буду весь день улыбаться :))

Answer 3

Я думаю, что было бы лучше и более совместимо, если бы вы просто соединили градиент и кнопку в одном изображении, но если это непрактично в вашей ситуации, вы можете добиться того же эффекта, используя несколько элементов div:

<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));">
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>

Убедитесь, что вы изменили параметры ширины / высоты, которые я установил, если вы используете мои.

Answer 4

Вы можете свести свою иконку на градиентный фон, что означает, что вам нужно всего лишь установить фоновое изображение. Кроме этого, я думаю, вам придется поместить тег (или контейнер с изображением в качестве фона) внутри контейнера с градиентной заливкой.

Answer 5

Вы должны использовать свой первый пример, но поверните линии так, чтобы изображение применялось перед градиентом.Все браузеры получат фоновое изображение, но только браузеры, которые понимают -webkit-gradient, будут использовать градиент.Все остальные будут игнорировать это.

.btn {
  background: url(…);
  background: -webkit-gradient(…);
}