Question

Название довольно многое говорит само за себя.Первое изображение ниже - это скриншот, когда вся страница имеет высоту около 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')";
  }

Градиент предназначен для обрезки при 250pxиз верхней части страницы.Тот факт, что степень полос зависит от общей высоты страницы, очень странный: страницы высот между этими двумя (800 и 8000 пикселей), кажется, имеют полосы, которые меньше, чем в первом примере, но все же заметны.

Интересно, что раньше я использовал -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.

Gringo Suave · Answer 1 · 11 сентября 2011

Похоже, ошибка веб-набора.Ниже я нашел обходной вариант, протестированный на последних версиях 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

Andres Ilich · Answer 2 · 11 сентября 2011

Ваша демонстрационная ссылка не работает, но я провел несколько тестов, и я работал нормально, используя 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/

Jose Faeti · Answer 3 · 06 сентября 2011

Похоже, что в Chrome есть некоторые ошибки при использовании значений rgba (). Я попытался с нормальными шестнадцатеричными значениями, и это, кажется, решить проблему для меня.

Смотрите здесь , если это исправит это и для вас.

Редактировать

Похоже, проблема в пределе 250px, потому что оно появляется, только если оно установлено.

Мне не удалось найти лучшее решение, чем на этот .

Наложение div с градиентом, который вам нравится, высотой 250px. Тогда у вас будет такая высота страницы, как вы хотите, потому что div всегда будет 250 пикселей в высоту.

kizu · Answer 4 · 07 сентября 2011

Вы пробовали установить background-size: auto, 250px 250px; - auto для первого изображения и 250px для градиента.

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

Итак, ваш пример выглядел бы так: http://jsfiddle.net/kizu/phPSb/ (с слепым кодом, хотя проблему не удалось воспроизвести).

ShalomSam · Answer 5 · 06 сентября 2011

вместо использования background-image, попробуйте использовать это (background) -

 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 было бы лучше использовать как на изображении (так как вы все равно загружаете изображение), и вам не придется беспокоиться о кросс-браузерной совместимости.

Mohsen · Answer 6 · 29 августа 2011

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')}

Я думаю, это происходит потому, что изображение имеет фиксированное количество пикселей

-webkit-linear-Gradient вызывает полосы в Chrome / Safari

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 6 ]

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

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

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

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

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

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

-webkit-linear-Gradient вызывает полосы в Chrome / Safari

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 6 ]

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

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

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

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

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

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

Нет похожих вопросов