Можно ли дать линейный и радиальный градиент для одного фона?

Question

Я хочу задать линейный и радиальный градиент для одного элемента управления.Можно ли совместить это два ??1001

Answer 1

Я использую enjoycss для комбинированных градиентов и других сложных вещей CSS

он автоматически генерирует CSS,

вы просто играете с элементами управления, как в Photoshop

http://enjoycss.com/6y/2#background

здесь генерируется код

background: -webkit-linear-gradient( -225deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -webkit-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: -moz-linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -moz-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);

Answer 2

Да, можно поставить линейные и радиальные градиенты на одном фоне.

Хитрость заключается в уменьшении непрозрачности этих градиентов!Если они непрозрачны, они, конечно, не будут видны, потому что градиент над ним заблокирует вид, поскольку изображения и градиенты накладываются друг на друга.

Пример кода для нескольких градиентов (линейный + радиальный) подimage:

background: url('images/picture.png') no-repeat,linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.3)),radial-gradient(rgb(221, 221, 221), rgb(78, 78, 78));

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

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

Answer 3

Вы не можете поместить два градиента на один и тот же элемент. Но если вы используете CSS градиент, браузер должен быть css3-совместимым. Вы можете использовать псевдо-класс: before и: after, чтобы иметь два разных css-селектора.

Попробуйте это:

div {
    position: relative;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(linear, 0 0, 0 500, from(rgba(220,30,50,1)), to(rgba(10,150,20,1)));
}
div:after {
    content : ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(radial, center center, 0, center center, 400, from(rgba(65,100,220,.5)), to(rgba(240,200,90,.5)));
}

РЕДАКТИРОВАТЬ:
Множественный фон IE 9 +
И после псевдоэлемента это IE 8 +

Answer 4

-webkit для Safari и Chrome. Вам нужно использовать -moz для firefox. Вот классный генератор в помощь. http://westciv.com/tools/gradients/index-moz.html