背景img不起作用css

-1

我看到了這個網頁設計，我想嘗試製作..我已經制作了標題到目前爲止，除了背景圖像之外，一切工作。我不知道我的代碼有什麼問題..請告訴我我做錯了什麼。我會把全部SCSS和HTML代碼背景img不起作用css

的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>ClassyDays</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" type="text/css" href="style/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet"/> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
</head> 

<body> 
<header> 
    <h2 id="nav-ico"><i class="fa fa-navicon"></i></h2> 
    <div id="warp-h"> 
    <h1>CLASSY<span class="gray">DAYS</span></h1> 
    <h2 class="gray">A classy HTML/Css3 design by <em>my highness</em></h2> 
    <button>LEARN MORE</button> 
</div> 
</header> 

<!--intro--><section id="sec1"></section> 
<!--features--><section id="sec2"></section> 
<!--feat-det--><section id="sec3"></section> 
<!--seprate--><section id="sec4"></section> 
<!--feat-pic--><section id="sec5"></section> 
<!--button-sep--><section id="sec6"></section> 
<!--team--><section id="sec7"></section> 
<!--login--><section id="sec8"></section> 
<!--socail-media--><section id="sec9"></section> 
<footer></footer> 
</body> 
</html>

，這是我的CSS（SCSS）代碼

//colors 
$black: #353535; 
$grey: #a1a9b0; 
$darkblue: #242830; 
$button: #3dc9b3; 
$button-shadow: #309383; 

//size 
$h1: 2em; 
$h2: 1.25em; 
$body: 1em; 

//font (only one) 
$font: 'Lato', sans-serif; 


* { 

} 
body { 
    color: $grey; 
    font-size: $body; 
    text-align: center; 
    font-family: $font; 
} 
.gray { 
    color: $grey; 
} 
h1 { 
    color: $black; 
    font-size: $h1; 
} 
h2 { 
    color: $black; 
    font-size: $h2; 

} 
header { 
    display:block; 
    background: url(img/header.png); 
    width: 100%; 
    overflow: auto; 
    #nav-ico { 
    float: right; 
    padding: .5 * $body 7 * $body; 
    :hover { 
     color: $grey; 
    } 
    } 
    #warp-h { 
    margin: auto; 
    padding: 4 * $h1; 
    } 
    button { 
    font-family: $font; 
    font-size: $body; 
    padding: .5 * $body $body; 
    margin: 2 * $body; 
    border: none; 
    border-radius: .5 * $body; 
    background: $button; 
    border-bottom: 4px solid $button-shadow; 
    text-align: center; 
    text-decoration: none; 
    color: white; 
    width: 10.25em; 
    height: 3.5em; 
    } 
}

我知道我沒有做任何CSS鏈接錯誤，因爲它基本上適用於所有的東西（顏色，大小，填充等）我也不相信問題與圖片或鏈接有關，因爲我改變了它的位置和圖片本身（我放了一張我用過的圖片以前在一個項目中）但不是ing工作我試圖從互聯網上多次複製粘貼該行，以防萬一我有拼寫錯誤但後來又沒有拼錯

編輯：謝謝！感興趣的人，基本上我忘了，使鏈接相對的CSS文件，而不是網站本身

來源

2017-10-10 RRR

您是否試圖在瀏覽器源代碼查看器中檢查圖片的完整url？嘗試添加斜槓之前，使路徑絕對而不是相對。 – ElChupacabra

檢查控制檯並看到錯誤 –

假設一切都如你所說的那樣，那是因爲'img/header.png'不正確。請記住，路徑需要與CSS文件相關。 – Adam

我懷疑你的背景圖片是不是相對於CSS文件...

background: url(/img/header.png);

這應該如果您的圖片在您的網站上發現，則可以使用。

來源

2017-10-10 17:58:03 Fenton

背景img不起作用css

回答

相關問題