Question

我让它在Firefox中显示我想要的内容，但是对于其他所有浏览器，似乎都存在一些问题。这个网站并不完全是公开的（因为没有人知道），但我仍然试图让事情正确显示，但URL是：http://www.mixbin.net（只是查看：代码的来源 - 没有任何服务器端干扰）

Firefox：完美。
Chrome：完美，但.content类中忽略了下边距 Opera：完美除了.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));

Answer 1

如果渐变的CSS是：

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

不需要高度为512px的<div>。不幸的是，这个解决方案适用于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>

Answer 2

这可能不是您正在寻找的解决方案，但是，由于您将不得不使用黑客使其在不同浏览器上看起来相同，为什么不使用渐变图像并在后台重复它。

如果您的背景渐变为300px，请使图像的高度为300px，宽度为1px（图像大小不能超过1KB），并在背景中重复

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

它可以毫无困难地在所有浏览器上运行;

无法在所有主流浏览器中正确显示CSS垂直线性背景渐变

2 个答案: