图片未在页面上呈现答案

【问题标题】：Img not rendering on page图片未在页面上呈现
【发布时间】：2017-07-28 02:27:46
【问题描述】：

我正在尝试将鸡的图像加载到我的网页上，但它根本没有呈现。这是我的代码笔：https://codepen.io/beckytownsend/pen/EvVjwa

我想不出我哪里错了！如果您进入 codepen（或 sn-p）并以全视图打开，您将在其中看到我的奶牛图像。

.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>

【问题讨论】：

你为什么有margin: 700px;？

标签： html css image

【解决方案1】：

您在奶牛上设置的 700 像素边距将鸡从页面上推出。删除它，它们都会移动到彼此相邻的左上角。

我假设您正在尝试根据背景将它们定位在特定位置。如果您调整浏览器大小，这不是响应式解决方案，但应该可以帮助您入门。

#cow,
#chicken {
   position: absolute;
}

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

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

【讨论】：

【解决方案2】：

你的鸡在那里，只是很低，你看不到它，因为你的容器 div 太大了......你需要正确定位它。尝试将此添加到您的 CSS：

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

编辑：或者....删除边距：700px；

【讨论】：

【解决方案3】：

您可能想尝试使用 margin-top 而不是 margin。仅使用“margin”将在奶牛的所有侧面创建 700px 的边距，将鸡图像推出框架。

#cow{
    margin-top:700px:
 }

【讨论】：