图片下的背景色在CSS和HTML中不起作用

Question

I want to make a background image on my webpage, and a background color under it so the places where the picture end you can see the color. 我想在网页上制作背景图片，并在其下制作背景颜色，以便图片结束的地方可以看到颜色。

I tried it 3 ways: 我尝试了3种方式：
html: 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>

and I tried 3 css combinations I found none of which work: 我尝试了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;
}

What am I doing wrong? 我究竟做错了什么？

Edit: I found the problem. 编辑：我发现了问题。 The bootstrap CSS file had background-color set to white and I had to override it adding !important to the background-color property in my layout file. 引导CSS文件的background-color设置为白色，我必须覆盖它，在布局文件中的background-color属性中添加！important。

Answer 1

Try this code: 试试这个代码：

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

html {
    background: #EE2020 !important;
}

This will work fine! 这样会很好！

Answer 2

Avoid using !important where you can . 尽量避免使用!important 。

Your options here are to include your stylesheet after bootstrap or learn about specificity . 您可以在此处进行选择，以便在引导后包含样式表或了解特定性。 A more specific rule that could work is: 可能适用的更具体的规则是：

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

Adding classes or id also can give you a more specific rule, but you should be able to avoid that in this case. 添加类或id也可以为您提供更具体的规则，但是在这种情况下，您应该可以避免这种情况。

It is important to remember if you want to override a library like bootstrap, to include your styles after the library, this is the way CSS has been designed. 重要的是要记住，如果要覆盖引导程序之类的库，以便在库之后包含样式，这就是CSS的设计方式。 It's part of the "Cascade" (the C in CSS). 它是“ Cascade”（CSS中的C）的一部分。 Knowing how to use specificity to resolve any other conflicts is also important. 知道如何使用特异性解决任何其他冲突也很重要。

图片下的背景色在CSS和HTML中不起作用

问题描述

2 个解决方案

解决方案1
0 2017-12-10 21:43:32

解决方案2
0 2017-12-10 22:42:38

图片下的背景色在CSS和HTML中不起作用

问题描述

2 个解决方案

解决方案1 0 2017-12-10 21:43:32

解决方案2 0 2017-12-10 22:42:38

解决方案1
0 2017-12-10 21:43:32

解决方案2
0 2017-12-10 22:42:38