Css 人体背景梯度

我正在网站上使用CSS线性渐变背景。在我测试过的所有浏览器中，背景都工作得很好——IE除外。不知何故，它似乎没有扩展wordpress页脚下的背景。所有其他浏览器在整个页面上缩放背景

我使用以下代码-其中包括大多数浏览器的特定代码：

body{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0 );!important /* IE6-9 */
font: normal 12px/100% "Arial", Arial;
}

知道为什么IE会切断背景吗

---

非常感谢

您需要使用图像在背景中具有渐变：

body{
background: url(yourimage.jpg) repeat-x left top #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0 );!important /* IE6-9 */
font: normal 12px/100% "Arial", Arial;
}

对于旧版本的浏览器，它们仍然需要图像来提供相同的效果

要获得页面底部的渐变，请尝试以下操作：

var bodyheight =$(window).height();
$('body').css({'min-height':bodyheight +'px'});

---

上面的jquery将强制主体具有用户窗口大小的最小高度。

我认为您可以在主体样式声明之前添加这一行来解决此问题：

html {height:100%;}

看一眼

注意：您需要设置

！重要信息

在分号之前，如下所示：

filter:progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#d0d3e6'，GradientType=0）！重要/*IE6-9*/
尝试：

html, body {
    height: 100%;
    min-height: 100%;
}

过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#cccccc'，endColorstr='#000000'）；/*对于IE*/
来说，在旧浏览器中只使用单色背景就可以了-IE虽然理解渐变，但在页脚处将其切掉，而不是将其应用于整个页面…谢谢，最小高度做到了！：）对于ie-9来说，仅仅身高似乎不够：(