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

回答

相关问题