css整页背景颜色，不重复申请BODY标签

时间：2015-05-13 10:36:38

标签： css user-interface

我希望有一个涵盖整页的背景知识。

我将Style添加到body代码。

ATTEMPT1：FIDDLE

默认情况下，重复背景。 enter image description here

ATTEMPT2：FIDDLE

当我添加background-repeat:no-repeat时，没有重复，但整页上没有出现颜色。 enter image description here

ATTEMPT3：

我们添加这些属性：

-moz-background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;


    background-size: cover;

然而，没有新的。

任何想法：如何通过将样式应用于BODY标记来制作整页的背景颜色而不重复？

3 个答案:

答案 0 :(得分：3)

您需要为height和<html>

设置<body> 
html, body {
    height: 100%;
}

Demo 

.your_gradient_class {
    /* Your gradient declaration goes here */

    background-attachment: fixed; /* Add this */
}

我建议您将渐变应用于<html>，而不是将其设置为<body>

您可能还想查看background-attachment: fixed;，这对您的背景非常方便。

请注意，您不必使用background-size: cover;。

答案 1 :(得分：0)

添加background-color：

.color-grad {background-color: rgb(238,244,248);}

https://jsfiddle.net/Laf16m61/3/

答案 2 :(得分：0)

通过执行以下CSS，您无需重复即可获得完整的车身颜色。例如

html, body{
    background: linear-gradient(rgba(19, 51, 76, 5), rgba(0, 87, 146, 5));
    background-attachment: fixed;
    background-size: cover;
    height: auto
}
相关问题
最新问题