Question

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

我想不出我哪里错了！如果你进入codepen（或片段）并打开一个完整的视图，你会看到我的牛图像。

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

Answer 1

你在牛上设置的700px边距正在推动鸡肉离开页面。移除它们，它们都将移动到彼此相邻的左上角。

我假设您正在尝试根据背景将它们放置在特定位置。如果你调整浏览器的大小但是应该让你开始，这不是一个响应式解决方案。

#cow,
#chicken {
   position: absolute;
}

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

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

Answer 2

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

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

编辑：或....删除保证金：700px;

Answer 3

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

{{1}}

我没有在页面上渲染

3 个答案: