Градиент фон
Автор O Mak задал вопрос в разделе Другие языки и технологии
ВЕРСТКА: как прописать код если фоном явл-ся градиент + еще позиционирована картинка (как фон)?получается 2 ка и получил лучший ответ
Ответ от Frisian[гуру]
1. телепаты в отпуске
2. все дизайны отличаются
3. вы когда машину захотите в авто мастерской отремонтировать придете в мастерскую и механику будете рассказывать что с ней или приедете и покажите машину?
тулите градиент в HTML
а картинку в боди позицонируйте либо используйте все прелести HTML5+CSS3
Ответ от Александр Ермилов[гуру]
технически, градиент - это тоже картинка, только векторная, поэтому правила такие же, как у обычного мульти-бэкграунда.
т. е. :
background: url(/images/1.jpg) 0 200px repeat-x, -moz-linear-gradient(top, #1e5799 0%, #cae7f9 100%) no-repeat #cae7f9 ; /* FF3.6+ */
background:url(/images/1.jpg) 0 200px repeat-x, -webkit-linear-gradient(top, #1e5799 0%, #cae7f9 100%) no-repeat #cae7f9; /* Chrome10+,Safari5.1+ */
и т. д. ( генератор градиента с кроссбраузерным кодом см. )
- картинка размножена по горизонтали с отступом от верха 200px. - background-position: 0 200px;
но мультибэкграунды не поддерживаются в IE<9;
есть оригинальный выход:
body { margin:0; padding:0; position:relative; width:100%; z-index:0;
background: #cae7f9 url(/images/1.jpg) 0 200px repeat-x; /* Old browsers */
background:#cae7f9 -moz-linear-gradient(top, #1e5799 0%, #cae7f9 100%) no-repeat, ; /* FF3.6+ */
background:#cae7f9 -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#cae7f9)) no-repeat; /* Chrome,Safari4+ */
background:#cae7f9 -webkit-linear-gradient(top, #1e5799 0%,#cae7f9 100%) no-repeat; /* Chrome10+,Safari5.1+ */
background:#cae7f9 -o-linear-gradient(top, #1e5799 0%,#cae7f9 100%) no-repeat; /* Opera11.10+ */
background:#cae7f9 -ms-linear-gradient(top, #1e5799 0%,#cae7f9 100%) no-repeat; /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#cae7f9',GradientType=0 ) no-repeat; /* IE6-9 */
background:#cae7f9 linear-gradient(top, #1e5799 0%,#cae7f9 100%); /* W3C */
//z-index: expression( runtimeStyle.zIndex=1, insertAdjacentHTML('beforeEnd', '<div id="ie6_before"></div>')); /* эмуляция :before для IE6-7 */
}
body:before, div#ie6_before { content:''; display:block; position:absolute; z-index:-1; top:200px; left:0; right:0; height:160px; width:100%; background:url(/images/1.jpg); }
т. е. градиент - в body
а картинка - бэкграундом для псевдоэлемента :before (в IE6-7 вместо него div id="ie6_before" )
height:160px; у :before - высота картинки.
- круче только яйца))
технически, градиент - это тоже картинка, только векторная, поэтому правила такие же, как у обычного мульти-бэкграунда.
т. е. :
background: url(/images/1.jpg) 0 200px repeat-x, -moz-linear-gradient(top, #1e5799 0%, #cae7f9 100%) no-repeat #cae7f9 ; /* FF3.6+ */
background:url(/images/1.jpg) 0 200px repeat-x, -webkit-linear-gradient(top, #1e5799 0%, #cae7f9 100%) no-repeat #cae7f9; /* Chrome10+,Safari5.1+ */
и т. д. ( генератор градиента с кроссбраузерным кодом см. )
- картинка размножена по горизонтали с отступом от верха 200px. - background-position: 0 200px;
но мультибэкграунды не поддерживаются в IE<9;
есть оригинальный выход:
body { margin:0; padding:0; position:relative; width:100%; z-index:0;
background: #cae7f9 url(/images/1.jpg) 0 200px repeat-x; /* Old browsers */
background:#cae7f9 -moz-linear-gradient(top, #1e5799 0%, #cae7f9 100%) no-repeat, ; /* FF3.6+ */
background:#cae7f9 -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#cae7f9)) no-repeat; /* Chrome,Safari4+ */
background:#cae7f9 -webkit-linear-gradient(top, #1e5799 0%,#cae7f9 100%) no-repeat; /* Chrome10+,Safari5.1+ */
background:#cae7f9 -o-linear-gradient(top, #1e5799 0%,#cae7f9 100%) no-repeat; /* Opera11.10+ */
background:#cae7f9 -ms-linear-gradient(top, #1e5799 0%,#cae7f9 100%) no-repeat; /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#cae7f9',GradientType=0 ) no-repeat; /* IE6-9 */
background:#cae7f9 linear-gradient(top, #1e5799 0%,#cae7f9 100%); /* W3C */
//z-index: expression( runtimeStyle.zIndex=1, insertAdjacentHTML('beforeEnd', '<div id="ie6_before"></div>')); /* эмуляция :before для IE6-7 */
}
body:before, div#ie6_before { content:''; display:block; position:absolute; z-index:-1; top:200px; left:0; right:0; height:160px; width:100%; background:url(/images/1.jpg); }
т. е. градиент - в body
а картинка - бэкграундом для псевдоэлемента :before (в IE6-7 вместо него div id="ie6_before" )
height:160px; у :before - высота картинки.
- круче только яйца))
Ответ от 3 ответа[гуру]
Привет! Вот подборка тем с похожими вопросами и ответами на Ваш вопрос: ВЕРСТКА: как прописать код если фоном явл-ся градиент + еще позиционирована картинка (как фон)?получается 2 ка