#ИМЯ?
Название довольно много говорит обо всем. Первое изображение ниже - скриншот, когда вся страница имеет высоту около 8000 пикселей, взятую в последней версии Chrome:
![enter image description here]()
в то время как это изображение для другой страницы (с использованием того же CSS), что составляет около 800 пикселей:
![enter image description here]()
и вот код:
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
Градиент предназначен для обрезания на 250 пикселей в верхней части страницы. Тот факт, что степень обвязки, по-видимому, зависит от общей высоты страницы, очень странный: страницы высот между этими двумя (800px и 8000px), кажется, имеют полосы, которые меньше первого примера, но все же заметны.
Интересно, что раньше я использовал -webkit-gradient('linear'...), и у меня не было той же проблемы; Я перешел только на -webkit-linear-gradient, чтобы он соответствовал моим градиентам -moz и -o.
Я не пробовал это в Safari, но вышеприведенный код отлично работает в Firefox и работает в Opera (цвета перепутались, но градиент по-прежнему плавный). Nevermind IE, от которого я отказался.
Кто-нибудь еще видел это раньше?
Обновление: это происходит и на моем Mac Chrome/Safari, но полосы примерно на 1/3 размера полос, показанных на верхнем изображении, для одной и той же страницы. Группировка идентична как в OSX Chrome, так и в OSX Safari.
1/3 размер по-прежнему заметен, но не настолько резкий. Фактическая страница находится в http://www.techcreation.sg/page/web/Intro%20to%20XTags/, если вы хотите увидеть себя в другом браузере. CSS является "встроенным" css, скомпилированным в браузере с использованием less.js.
Ответы
Ответ 1
Похож на ошибку webkit. Я придумал обход ниже, проверенный на последних версиях Chrome и FF. Короче говоря, вы разместите div, содержащий фон за основным содержимым. Я также добавил несколько стилей, чтобы сделать IE более счастливым.
С учетом этого HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
В сочетании с этой таблицей стилей:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
Он должен выглядеть так, независимо от размера окна:
![Chrome image]()
Ответ 2
Ваша демонстрационная ссылка не работает, но я сделал некоторые тесты, и она отлично работала для меня, используя Chrome, когда вы добавляете ширину/высоту 100% в элементы body/html, например:
body, html {
width:100%;
height:100%;
}
Демо
Вы можете попробовать это или можете просто объявить заголовок/логотип, где вы можете добавить начальный градиент и просто добавить конечный градиент к телу вашего css, чтобы он сливался правильно, например:
CSS
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
body {
background-color: #f3ffff;
margin:0px;
height:10000px;
}
.header {
height:300px;
width:100%;
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
);
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
background-size:auto;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
HTML
<div class="header">
content
</div>
Демо
Дружественное примечание: Для любого, кто ищет проблему, вы можете увидеть, как это происходит в Chrome: http://jsfiddle.net/skJGG/
Ответ 3
Похоже, у Chrome есть некоторые ошибки при использовании значений rgba(). Я пробовал с нормальными шестнадцатеричными значениями и, похоже, решил проблему для меня.
Посмотрите здесь, если он исправит его и для вас.
Edit
Похоже, проблема в пределе 250px, потому что она появляется только тогда, когда она установлена.
Мне не удалось найти лучшее решение, чем этот.
Перекрытие div с градиентом, который вам нравится, 250px tall. Тогда вы можете сделать страницу такой высокой, как хотите, потому что div всегда будет иметь высоту 250 пикселей.
Ответ 4
Webkit визуализирует -webkit-gradient('linear'...) и webkit-linear-gradient таким же образом. Проблема заключается в вашем многократном фоне. У меня была одна и та же проблема, и я закончил с двумя разными элементами друг на друга, а затем давал задний план каждому из них. Что-то вроде:
<body>
<div class="body-overlay"<div>
</body>
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url('blah.png')}
Я думаю, это происходит потому, что изображение имеет фиксированное количество пикселей
Ответ 5
вместо использования фонового изображения, попробуйте использовать это (фон) -
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */
а также всегда использовать шестнадцатеричные значения. Но с точки зрения UX было бы лучше использовать как в изображении (так как вы все равно загружаете изображение), и вам не придется беспокоиться о совместимости с браузером.
Ответ 6
Вы пробовали установить background-size: auto, 250px 250px; - auto для первого изображения и 250 пикселей для вашего градиента.
Если вам не нужен градиентный образ настолько большой, что он будет охватывать всю страницу, лучше всего ограничить его размер. Помимо проблем с большими изображениями, я думаю, что это лучше для производительности браузера.
Итак, вы, например, выглядели бы как http://jsfiddle.net/kizu/phPSb/ (вслепую, не могли воспроизвести проблему, хотя).
