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

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文件的background-color設置為白色，我必須覆蓋它，在布局文件中的background-color屬性中添加！important。

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

盡量避免使用!important 。

您可以在此處進行選擇，以便在引導后包含樣式表或了解特定性。 可能適用的更具體的規則是：

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

添加類或id也可以為您提供更具體的規則，但是在這種情況下，您應該可以避免這種情況。

重要的是要記住，如果要覆蓋引導程序之類的庫，以便在庫之后包含樣式，這就是CSS的設計方式。 它是“ Cascade”（CSS中的C）的一部分。 知道如何使用特異性解決任何其他沖突也很重要。

圖片下的背景色在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