CSS фон столкновения - PullRequest
Новая
       6

CSS фон столкновения

3 голосов
/ 28 июня 2011 
background:url("../images/header-icon.png") no-repeat 90% 50%;
background: -moz-linear-gradient(top, #FDFDFD 0%, #F8F8F8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#F8F8F8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#F8F8F8',GradientType=0 );

Как сделать так, чтобы эти фоны не сталкивались друг с другом?Изображение url не отображается - или, если я переверну порядок, в котором градиент не отображается ... есть ли способ объединить их, чтобы они были в одной строке, чтобы остановить столкновение и исключить друг друга?

Спасибо

Ответы [ 2 ]

4 голосов
/ 28 июня 2011

Конечно, просто скомбинируйте их следующим образом: 

/* for browsers that don't support CSS3 backgrounds */
background: url("../images/header-icon.png") no-repeat 90% 50%;

/* for Firefox */
background: url("../images/header-icon.png") no-repeat 90% 50%, -moz-linear-gradient(top, #FDFDFD 0%, #F8F8F8 100%);

/* for WebKit */
background: url("../images/header-icon.png") no-repeat 90% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#F8F8F8));

/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#F8F8F8',GradientType=0 );

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

См.http://www.w3.org/TR/css3-background/#layering

Фон рамки может иметь несколько слоев в CSS3.Количество слоев определяется числом значений через запятую в свойстве background-image.

См. Также: http://www.w3.org/TR/css3-background/#the-background

0 голосов
/ 28 июня 2011

рассмотрите этот сайт, чтобы помочь создать градиенты CSS http://www.colorzilla.com/gradient-editor/

Вот пример http://jsfiddle.net/pxfunc/LG2dU/

Отметим, что стиль -webkit-gradient был заменен на -webkit-linear-gradient в Chrome 10 &Safari 5.1 для совместимости со спецификацией W3C

Для показа градиента и изображения вам нужно будет указать цвет градиента с некоторой альфа-прозрачностью, например, установить один из цветов градиента на transparent или используя rgba или hsla форматы

CSS: 

/* Default -no gradient- */
background:url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* FF3.6+ */
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(238,238,238,0.79) 53%, rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(53%,rgba(238,238,238,0.79)), color-stop(100%,rgba(255,255,255,0))),
   url("http://placehold.it/300/f00") no-repeat 90% 50%; 
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* Opera11.10+ */
background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* IE10+ */
background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 ),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* W3C */
background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
...