Шаблон повторения CSS с линейным градиентом - PullRequest
Новая
       21

Шаблон повторения CSS с линейным градиентом

2 голосов
/ 08 мая 2011

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

Найденный мной шаблон имеет размер 120x120 пикселей

.

enter image description here

Если бы я закончил, я должен использовать эту CSS: 

background-imag:url(mypattern.jpg);
background-repeat:repeat;

Но я еще не закончил. Я хотел бы ** добавить на фон моей страницы линейный градиент (dir = top / down col = light-blue / green) со слоем заливки узором поверх него, с режимом смешивания = darken **.

Это конечный эффект:

enter image description here

Я подошел к делу.

ВОПРОС: Комбинируя эффект линейного вертикального градиента и мой рисунок 120x120, можно ли найти образец, который я мог бы использовать для бесконечного повторения себя как по вертикали, так и по горизонтали?

Надеюсь, это понятно

спасибо

Лука

Ответы [ 3 ]

1 голос
/ 08 мая 2011

или вы можете использовать фоновый градиент css3 

body { background: url('pattern.jpg') repeat;}
#container {
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}

, чтобы заставить его работать в IE lte 7, добавьте: 

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')

Цвет предоставляется в формате #aarrggbb, где aa = альфа (прозрачность), остальные как обычный шестнадцатеричный цвет.

0 голосов
/ 10 ноября 2013

Dis будет работать, bg паттерн с линейным или радиальным градиентом: 

background-image: url(images/pattern.png),  -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
    background-image: url(images/pattern.png),  radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));
0 голосов
/ 08 мая 2011

Применить 

html{
    background: url('mypattern.jpg') repeat;
}
body{
    background: url('gradient.png') repeat-x;
    width:100%;
    height:100%;
}

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

...