Img not rendering on page

我正在嘗試在我的網頁上加載一隻雞的圖像，但它根本沒有渲染。這裏是我的代碼筆：https://codepen.io/beckytownsend/pen/EvVjwa Img not rendering on page

我想不出我哪裏出錯了！如果你進入codepen（或snippet）並打開一個完整的視圖，你會在那裏看到我的牛形象。

.body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url("http://www.publicdomainpictures.net/pictures/40000/velka/the-house-in-the-field.jpg"); 
 
    background-size: cover; 
 
    overflow: hidden; 
 
    margin-top: -150px; 
 
} 
 

 
img { 
 
    width: 25%; 
 
} 
 

 
#cow { 
 
    margin: 700px; 
 
}

<body> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Cow_cartoon_04.svg/1280px-Cow_cartoon_04.svg.png" id="cow"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Rooster_cartoon_04.svg/2000px-Rooster_cartoon_04.svg.png" id="chicken"> 
 

 
</body>

來源

2017-07-27 Becky Townsend

你爲什麼有'保證金：700像素;'？ – j08691

的700像素保證金您是在牛的設置是推雞關閉頁面。刪除它們，它們都會移動到彼此相鄰的左上角。

我假設你正試圖根據背景將它們放在特定的位置。如果您調整瀏覽器的大小，這不是一個快速響應的解決方案，但應該讓您開始。

#cow, 
#chicken { 
    position: absolute; 
} 

#cow { 
    bottom: 60px; 
    right: 130px; 
} 

#chicken { 
    bottom: 20px; 
    right: 600px; 
    max-width: 140px; 
}

來源

2017-07-27 18:13:45

你的雞在那裏，只是很低，你不能看到它，因爲你的容器div太大......你需要正確定位它。嘗試添加到您的CSS：

#chicken { 
    position:absolute; 
    left:0; 
    top:0; 
}

編輯：或....刪除邊距：700px;

來源

2017-07-27 18:14:24 Varin

您可能想嘗試使用margin-top而不是margin。僅使用「邊距」會在牛的所有側面創建700px的邊距，從而將雞形象推倒出來。

#cow{ 
 
    margin-top:700px: 
 
}

來源

2017-07-27 18:26:21

Img not rendering on page

回答

相關問題