css - CSS 中带有渐变背景的不需要的重复

标签 css background-image linear-gradients

我正在为网页创建 CSS 样式表。我想要整个网页的渐变背景,但我不知道如何让渐变覆盖整个网页。现在,渐变采用典型横幅的形式,通过网站向下复制,就像一个“条”在另一个之上。

关于如何解决这个问题有什么想法吗?

我目前的代码:

body {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF));
}

最佳答案

使用 VH 单位,即垂直高度。

考虑

100vh = 100%.

body {

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF));

    height:100vh; /* vh = Vertical Height */
}

Example Here

关于css - CSS 中带有渐变背景的不需要的重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29358781/

相关文章:

html - 背景DIV被切断

css - 如何使用 CSS 创建实心彩虹边框?

html - 如何在div后面插入图片

html - SVG 剪辑路径动画不适用于 Firefox

CSS - 多个背景图像填充

css - 使用 CSS3 悬停时背景图像不透明度过渡

css - Safari 中的 CSS3 渐变问题

html - 如何在左右边框上放置两个线性渐变?

css - 悬停时获得棕褐色效果图像和全彩色?

javascript - 弹出窗口不适用于谷歌地图