Проблемы с получением вертикального линейного градиента CSS для правильного отображения во всех основных браузерах - PullRequest
Новая
       20

Проблемы с получением вертикального линейного градиента CSS для правильного отображения во всех основных браузерах

1 голос
/ 04 марта 2012

Я сделал так, чтобы он отображал именно то, что я хочу в Firefox, но с любым другим браузером, похоже, есть некоторые проблемы. Этот веб-сайт не является общедоступным (как, впрочем, никто не знает об этом), так как я все еще пытаюсь заставить вещи отображаться правильно, но URL-адрес: http://www.mixbin.net (просто просмотр: исходный код - ничто не мешает стороне сервера)

Firefox: Отлично.
Chrome: Отлично, за исключением того, что нижнее поле игнорируется в классе .content.
Опера: Отлично, за исключением того, что нижнее поле игнорируется в классе .content.
Safari: Правильно отображает градиент, но вызывает обновление, как только вы прокрутите страницу наполовину.
Internet Explorer: Правильно отображает градиент, но .content div обрезается там, где градиент останавливается. 

background:linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background:-moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background:-ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background:-o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background:-webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /*IE6-9*/

Изображения не нужны. Поэтому, пожалуйста, не отвечайте "просто сделайте фоновое изображение".

Обновление 2: Все (включая IE) теперь работает. Я переключил эти две строки с: 

    background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));

Кому: 

    background:-webkit-linear-gradient(top, #000000, #353535);
    background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));

Ответы [ 2 ]

0 голосов
/ 04 марта 2012

Если ваш CSS для градиента: 

background: linear-gradient(top, #000000 0%, #353535 512px);

, вам не понадобится <div> с высотой 512 пикселей.К сожалению, это решение работает для всех браузеров, кроме IE.

Вернемся к вашему дополнительному фону <div>.Я скопировал и немного изменил ваш код.Это работает для всех браузеров. 

body {
  background: #353535;
}
.content {
  background-color: white;
  height: 1000px;
  margin: 20px auto;
  width: 300px;
  z-index: 2;
  position: relative;
}
#background {
  position: absolute;
  top: 0;
  height: 512px;
  width: 100%;
  background: linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
  background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
  background: -ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
  background: -o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
  background: -webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0); /*IE6-9*/
}
<body>
  <div id="background"></div>
  <div class="content"></div>
</body>
0 голосов
/ 04 марта 2012

Возможно, это не то решение, которое вы ищете, но, поскольку вам придется использовать хаки, чтобы оно выглядело одинаково в разных браузерах, почему бы вам не использовать изображение градиента и не повторять его в фоновом режиме.

Если фоновый градиент составляет 300 пикселей, создайте изображение с высотой 300 пикселей и шириной 1 пиксель (размер изображения не должен превышать 1 КБ) и повторите его в фоновом режиме

background: url('bg_gradient.jpg') repeat-x 0px 0px;

Это будет работать на всех браузерах без каких-либо хлопот;

...