当前位置: 首页 > 面试题库 >

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

袁增
2023-03-14
问题内容

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

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

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

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

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


问题答案:

应用以下CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

编辑: 添加background-attachment: fixed;到每个声明的正文声明JoheGreen。



 类似资料:
  • 我试图使用CSS设置背景图像,但原始图像被拉伸。如何保持原始图像大小,同时设置整个页面的背景? 原始图像为:原始图像 结果是:结果图像 不同的是我的网页背景比原来的要大。 任何帮助都将不胜感激!!!

  • 问题内容: 我不知道如何在按钮上设置背景渐变(不使背景渐变成为图像)。这与Android截然不同。 这是我必须定义一个可返回的渐变方案的类: 我可以使用以下方法设置整个视图的背景: 但是,如何访问按钮的视图并插入子层或类似内容? 问题答案: 您的代码工作正常。您只需要记住每次都要设置渐变的帧。最好仅使渐变类别也为您设置视图的框架。 这样,您就不会忘记,它也很好。 按钮是视图。对其应用渐变的方式与将

  • 问题内容: 我正在尝试在CSS上的缩略图上进行悬停过渡,以便在悬停时淡入背景渐变。过渡不起作用,但是如果我简单地将其更改为一个值,则可以正常工作。不支持渐变吗?我也尝试过使用图像,它也不会转换图像。 我知道这是有可能的,就像在另一篇文章中有人做的那样,但我不知道该怎么做。任何帮助>以下是一些可使用的CSS: 问题答案: 渐变尚不支持过渡(尽管当前规范说,它们应支持渐变,例如通过插值进行渐变过渡)。

  • 渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡。使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度。 渐变,就是两种或多种颜色之间的平滑过渡。在创建渐变时,可以指定多个中间颜色值,这些值称为色标。每个色标包含一种颜色和一个位置,浏览器自动从一个色标的颜色,平滑过渡到下一个色标的颜色。 在CSS3中,只需将 ba

  • 问题内容: 这是我的CSS脚本 我想把整个细胞伸展 问题答案: .style1 { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgrou

  • 我想使用CSS设置一些背景图像大小。 我可以使用下面的css代码设置大小。我一直在w3schools阅读css格式,并参考了下面的stackoverflow帖子: 我已经尝试了所有的方法,包括包含和覆盖。但是我一直在拉伸和模糊图像。我如何在不模糊图像的情况下做到这一点?仅供参考原始图像大小为