我的CSS渐变不伸展,它重复 [英] My css gradient doesn't stretch, it repeats
本文介绍了我的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, left top, left bottom, color-stop(0%,#4a0c6b), color-stop(100%,#669966)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4a0c6b 0%,#669966 100%); /* W3C */
大部分情况下,然后重复
It goes most of the way down, then repeats
推荐答案
您的原始代码: http://jsfiddle.net/ ecKR4 / 7 /
如果您希望渐变展开页面的整个高度:
html {
min-height: 100%
}
内容很少: http://jsfiddle.net/ecKR4/1/
有很多内容: http://jsfiddle.net/ecKR4/2/
如果您希望渐变固定且高度与视口一样高:
html {
height: 100%
}
body {
background-attachment: fixed
}
内容很少: http: //jsfiddle.net/ecKR4/3/
有很多内容: http:// jsfiddle .net / ecKR4 / 4 /
如果您希望渐变的高度与视口一样高, strong>
If you want the gradient to be as high as the viewport, and then the background colour:
html {
height: 100%
}
body {
background-repeat: no-repeat;
background-color: #669966; /* ending colour of gradient */
}
内容很少:http://jsfiddle.net/ecKR4/5/
有很多内容:http://jsfiddle.net/ecKR4/6/
这篇关于我的CSS渐变不伸展,它重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文