我的css渐变不拉伸,重复

前端之家收集整理的这篇文章主要介绍了我的css渐变不拉伸,重复前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
body{
padding:0;
margin:0;
font:normal 12px/16px Arial,Helvetica,sans-serif;
color:#383634;
background-image: -webkit-gradient(
linear,left top,left bottom,color-stop(0.18,rgb(74,12,107)),color-stop(0.87,rgb(102,153,102))
);
background: -moz-linear-gradient(top,#4a0c6b 0%,#669966 100%); /* FF3.6+ */
background: -webkit-gradient(linear,color-stop(0%,#4a0c6b),color-stop(100%,#669966)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,#669966 100%); /*    Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,#669966 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top,#669966 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b',endColorstr='#669966',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top,#669966 100%); /* W3C */
@H_404_4@大部分情况下降,然后重复

解决方法

您的原始码: http://jsfiddle.net/ecKR4/7/ @H_404_4@如果您希望渐变可以拉伸页面的整个高度:

html {
    min-height: 100%
}
@H_404_4@内容很少:http://jsfiddle.net/ecKR4/1/
有很多内容http://jsfiddle.net/ecKR4/2/

@H_404_4@如果你希望渐变是固定的,和视口一样高:

html {
    height: 100%
}
body {
    background-attachment: fixed
}
@H_404_4@内容很少:http://jsfiddle.net/ecKR4/3/
有很多内容http://jsfiddle.net/ecKR4/4/

@H_404_4@如果您希望渐变与视口一样高,然后是背景颜色:

html {
    height: 100%
}
body {
    background-repeat: no-repeat;
    background-color: #669966; /* ending colour of gradient */
}
@H_404_4@内容很少:http://jsfiddle.net/ecKR4/5/
有很多内容http://jsfiddle.net/ecKR4/6/

猜你在找的CSS相关文章