为了账号安全,请及时绑定邮箱和手机立即绑定

在主体上设置的CSS3渐变背景不会拉伸,而是会重复吗?

/ 猿问

在主体上设置的CSS3渐变背景不会拉伸,而是会重复吗?

BIG阳 2019-10-04 14:35:53

好的,说里面的内容<body>总计高300像素。


如果我设置<body>使用-webkit-gradient或的背景-moz-linear-gradient


然后,我将窗口最大化(或使其高度大于300px),渐变将恰好是300px高(内容的高度),然后重复进行以填充窗口的其余部分。


我假设这不是错误,因为在webkit和gecko中都是相同的。


但是,是否有一种方法可以使渐变拉伸以填充窗口而不是重复?


查看完整描述

3 回答

?
弑天下

应用以下CSS:


html {

    height: 100%;

}

body {

    height: 100%;

    margin: 0;

    background-repeat: no-repeat;

    background-attachment: fixed;

}

编辑:添加margin: 0;到每个声明的正文声明(Martin)。


编辑:添加background-attachment: fixed;到每个声明的正文声明(Johe Green)。


查看完整回答
反对 回复 2019-10-04
?
烙印99

关于先前的答案,如果内容需要滚动,则设置html和body为height: 100%似乎无效。添加fixed到背景似乎可以解决此问题-否need for height: 100%;


例如:


body {

  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;

}


查看完整回答
反对 回复 2019-10-04
?
芜湖不芜

这是我为解决此问题所做的工作...它将显示整个内容长度的渐变,然后简单地回退到背景色(通常是渐变中的最后一种颜色)。


   html {

     background: #cbccc8;

   }

   body {

     background-repeat: no-repeat;

     background: #cbccc8;

     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));

     background: -moz-linear-gradient(top, #fff, #cbccc8);

     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');

   }

<body>

  <h1>Hello world!</h1>

</body>

我已经在FireFox 3.6,Safari 4和Chrome中对此进行了测试,对于某些出于某种原因不支持HTML标记样式的浏览器,我将背景颜色保留在主体中。


查看完整回答
反对 回复 2019-10-04

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信