Question

我写的CSS如下。我不确定为什么背景颜色重复而不是遮盖。提前感谢您的帮助：）

body {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    color-stop(41%,rgba(41,137,216,1)), color-stop(77%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    color: #000000;
    font-family: Georgia,Arial,Serif;
    font-size: 12px;
}

figure {
    float: left;
}

.question {
    color: blue;
    font-size: 20px;
}

.answer {
    color: green;
    font-size: 16px;
}

#taskpic {
    float: right;
}

#audience {
    float: left;
    width: 550px;
    font-size: 16.5px;
}

#back {
    font-size: 15px;
}

#main {
    float: left;
    color: black;
    width: 160px;
    border: 1px solid brown;
    border-style: double;
    padding: 2px;
    font-size: 18.5px;
}

#youarehere {
    color: black;
}

#name {
    border: 1px solid blue;
    padding-left: 515px;
}

figure figcaption {
    text-align: center;
}

ul {
    float: right;
    border: 1px solid  blue;
    width: 200px;
    list-style-type: none;
    font-size: 25px;
    font-weight: bold;
}

li a:link {
    color: red;
}

li a:visited {
    color: red;
}

li a:focus {
    color: red;
}

li a:hover {
    color: blue;
}

li a:active {
    color: blue;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:focus {
    color: black;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

h2 a:link {
    color: pink;
}

h2 a:visited {
    color: pink;
}

h2 a:focus {
    color: pink;
}

h2 a:hover {
    color: red;
}

h2 a:active {
    color: red;
}

Answer 1

color-stop不是有效的CSS属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

您需要使用以下内容：

body {
    background: #ff0000;
    background: -moz-linear-gradient(top,  rgba(41,137,216,1) 41%, rgba(125,185,232,1) 77%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,rgba(41,137,216,1)), color-stop(77%,rgba(125,185,232,1)));
    background: -webkit-linear-gradient(top,  rgba(41,137,216,1) 41%,rgba(125,185,232,1) 77%);
    background: -o-linear-gradient(top,  rgba(41,137,216,1) 41%,rgba(125,185,232,1) 77%);
    background: -ms-linear-gradient(top,  rgba(41,137,216,1) 41%,rgba(125,185,232,1) 77%);
    background: linear-gradient(to bottom,  rgba(41,137,216,1) 41%,rgba(125,185,232,1) 77%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=0 );
}

这是生成跨浏览器背景渐变的好工具：http://www.colorzilla.com/gradient-editor/

此外，background-size用于背景图片。

Answer 2

此代码应该并且可以设置您的背景：

    background-size:cover;

尝试使用＆＃34;完整背景＆＃34;代码集：

    body {
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    }

希望这有帮助。

为什么我的CSS背景颜色重复而不是覆盖？

2 个答案: