html – 渐变背景使用CSS填充页面_html-js-css

概述我有这个渐变背景，但我不希望它重复填充页面的方式，我希望它是一个大的渐变填充页面。 HTML： <!DOCTYPE html><head> <meta charset = "UTF-8"/> <title>Home</title> <link rel="stylesheet" text="text/css" href="css.css"></head><body> 我有这个渐变背景，但我不希望它重复填充页面的方式，我希望它是一个大的渐变填充页面。

HTML：

<!DOCTYPE HTML><head>    <Meta charset = "UTF-8"/>    <Title>Home</Title>    <link rel="stylesheet" text="text/CSS" href="CSS.CSS"></head><body>    </body>

CSS：

p {    Font-family:"Arial Black";    line-height:120%;}HTML {    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    background: #70bg32;    background-repeat:no-repeat;    background: -webkit-linear-gradIEnt( to left top,blue,red);    background: -moz-linear-gradIEnt( to left top,red);    background: -ms-linear-gradIEnt( to left top,red);    background: -o-linear-gradIEnt( to left top,red);    background: linear-gradIEnt( to left top,red);}

http://jsfiddle.net/F7vf9/

解决方法要使渐变填充视口，请将< HTML>元素的高度为100％： fiddle

HTML {    height: 100%;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;    background: #70bg32;    background-repeat:no-repeat;    background: -webkit-linear-gradIEnt( to left top,red);}

为了防止渐变重复通过视口的可见部分(假设有滚动条)，请替换height：100％;最小高度：100％;

总结

以上是内存溢出为你收集整理的html – 渐变背景使用CSS填充页面全部内容，希望文章能够帮你解决html – 渐变背景使用CSS填充页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1110773.html

html – 渐变背景使用CSS填充页面

发表评论

评论列表（0条）