2 qq 34166707 qq_34166707 于 2016.03.28 10:14 提问

如何运用Css实现整个网页背景颜色渐变?

本人网页初学者,在用Css实现网页背景颜色渐变过程中用这个background: -webkit-gradient(linear, 0 0, 0 100%, from(#4285fa), to(#366dcb)),发现谷歌浏览器中显示是条纹渐变,如图这样图片说明,改用IE、火狐浏览器代码都是这样,而我想要的是整个网页背景渐变。求助!谢谢

3个回答

runing22
runing22   2016.03.28 10:44

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 /
background: -o-linear-gradient(red, blue); /
Opera 11.1 - 12.0 /
background: -moz-linear-gradient(red, blue); /
Firefox 3.6 - 15 /
background: linear-gradient(red, blue); /
标准的语法 */

runing22
runing22 你要设置一下那高度,height:800px
2 年多之前 回复
qq_34166707
qq_34166707 还是不行额,还是条纹状
2 年多之前 回复
qq_34166707
qq_34166707 还是不行额,还是条纹状
2 年多之前 回复
qq_34166707
qq_34166707 还是不行额,还是条纹状
2 年多之前 回复
qq_34166707
qq_34166707 谢谢,我试试
2 年多之前 回复
qq_34166707
qq_34166707   2016.03.28 12:27

楼上的朋友,谢谢你的回答,但是还是不行额,你看图片说明,你看能不能调试让整个页面颜色渐变,这是我的代码主要部分:



jianbian

<!-- Date: 2016-03-28 -->
<br> body{<br> /*background: -webkit-linear-gradient(red, blue); Safari 5.1 - 6.0 <em>/<br> /*background: -o-linear-gradient(red, blue); Opera 11.1 - 12.0 */<br> /*background: -moz-linear-gradient(red, blue); */ /*Firefox 3.6 - 15</em>/<br> background: linear-gradient(red, blue); /*标准的语法 */ </p> <pre><code> } &lt;/style&gt; </code></pre> <p></head><br> <body><br> &lt;!-- <tr> <br> <td style="font-weight:bold;color:Black;border:1px solid #E5F5FF; <br> filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#E5F5FF', gradientType='0');"><br> text</td><br> </tr><br> </table>--&gt;<br> hello word!<br> </body><br> </html></p>
qq_19558705
qq_19558705   Ds   Rxr 2016.03.28 15:40

参考这个:

 html{height: 100%;}
        body {
            background-image: linear-gradient(to bottom, #FFF 0, #EAEAEA 100%);
            background-repeat: repeat-x;
            background-size: cover;
            height: 80%;
        }

图片说明

qq_19558705
qq_19558705 回复qq_34166707: 不客气
2 年多之前 回复
qq_34166707
qq_34166707 谢谢这种方法很好
2 年多之前 回复
qq_34166707
qq_34166707 谢谢,我试试
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
CSS实现网页背景颜色渐变效果的代码
body { font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica; margin: 0; background-color: #b1e0fa; background-image: -webkit-gradient(linear, left top, left bottom, f
html背景色渐变(通过CSS实现)
效果截图: ----------------------------------------------------------------------------------------------------------------------------- 实现代码: .linear{ width:100%; height:600px; FILT
页面背景色渐变
渐变效果: css:html,body { height: 100%; } body { background: linear-gradient(#51b0e7,#006084); }上下两块: css:body { background: linear-gradient(#51b0e7 50%,#006084 50%);/*上下各50%*/ }横线背景:
javascript实现网页背景颜色渐变
javascript实现网页背景颜色渐变
网页背景色渐变效果
背景色渐变: 参数说明: GradientType为渐变类型,0为上下渐变,1为左右渐变 StartColorStr为开始颜色 EndColorStr为结束颜色 背景色透明: <body style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=25,finishOpacity=100,startX
css样式实现整个页面背景使用一张图片
现在很多网站的小图标都是共享的
Html 设置整个页面的背景颜色
在index.css中添加 body{ background:#ffffff} 设置颜色为白色也就是给index.html设置了body的颜色,然后就可以看到整个html页面的颜色就成了白色。
CSS给网页添加背景 铺满屏幕
CSS给网页添加背景 铺满屏幕会有这样的铺背景的要求: 当页面长度大于窗口长度的时候,背景需要和页面长度一样长 当页面长度小于窗口长度的时候,背景需要和窗口长度一样长 总之就是看见的地方都要有背景在html的body中定义一个背景块<div class="back"> </div>在css中,把这个背景块设置为绝对定位,并且把高度和宽度都设置为100%即可。.back{ position:a
移动开发之css3实现背景几种渐变效果
移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域。产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观众闭上眼睛还有残影,眼睛会极度疲劳)。2:优雅而低调的深浅色调:3:纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感4:稍微加点渐变可以让纯色...
CSS样式设置网页背景
首先我们要知道在HTML、CSS里面,有关背景的设置都与background有关,比如background-color:background-image:等 1、background-color属性-设置背景颜色 语法:background-color:颜色; 这里的颜色可以直接用颜色名字,也可以使用三元色、十六进制等; 如:background-color:rgba(0,0,0,.8);