Question

我想在我的网页上制作背景图片，并在其下面添加背景颜色，以便图片结束的地方可以看到颜色。

我尝试了3种方式：
HTML：

<!DOCTYPE html>

<html>
<head>
    <title> title</title>
    <link href="style.css" rel="stylesheet" type="text/css" >
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
</head>


<body>
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6 header">
            dssadsasddsads
        </div>
        <div class="col-md-3">
        </div>
    </div>
</body>

我尝试了3种css组合，但我发现它们都不起作用：

body {
    margin: 0;
    background-image: url('img/bg6.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #EE2020;}

body {
    margin: 0;
    background: #EE2020 url('img/bg6.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

body {
    margin: 0;
    background: url('img/bg6.jpg'), #EE2020;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

我做错了什么？

编辑：我发现了这个问题。引导程序CSS文件的背景颜色设置为白色，我不得不重写它，在我的布局文件中添加！important到background-color属性。

Answer 1

试试这段代码：

body {
    margin: 0;
    background: url('img/bg6.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: transparent !important;
}

html {
    background: #EE2020 !important;
}

这样可以正常使用！

Answer 2

Avoid using !important where you can。

此处的选项是在引导程序之后包含样式表或了解specificity。可以使用的更具体的规则是：

html > body { background-color: #EE2020;}

添加类或ID也可以为您提供更具体的规则，但在这种情况下您应该能够避免这种情况。

重要的是要记住，如果要覆盖像引导程序这样的库，要在库之后包含样式，这就是CSS的设计方式。它是“Cascade”（CSS中的C）的一部分。了解如何使用特异性来解决任何其他冲突也很重要。

图像下的背景颜色不适用于CSS和HTML

2 个答案: