css background-position - png 图像未显示为在 css 中定位答案

【问题标题】：css background-position - png images not displayed as positioned in csscss background-position - png 图像未显示为在 css 中定位
【发布时间】：2014-10-28 02:53:19
【问题描述】：

由于某种原因，背景位置不起作用我正在尝试设置各种充满 png 的行星 div，这样我就可以进行其他编码，但图像都显示在彼此之上，其中一些被剪切跨越 div。

CSS：

body{
background-image:url('../img/para2/space_bg.jpg');
}

#planet_1{
background:url('../img/para2/planet_1.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position: 400px 400px;
}

#planet_2{
background:url('../img/para2/planet_2.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position: 800px 600px;
}

#planet_3{
background:url('../img/para2/planet_3.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position:450px 700px;
}

#planet_4{
background:url('../img/para2/planet_4.png');
height:200px;
width:200px;
position:absolute;
margin:0;
padding:0;
display:block;
background-position:700px 350px;
}

html:

<!DOCTYPE html>
<html lang = en>
<head>
    <title>BASIC PARALLAX MOUSE 2</title>
    <meta charset = "utf8">
    <link rel = "stylesheet" href = "css/para2.css">
    <script src = "java/jquery-2.1.1.js"></script>
    <script src = "java/jquery_ui.js"></script>
</head>
<body>

    <div id = "planet_1"></div>
    <div id = "planet_2"></div>
    <div id = "planet_3"></div>
    <div id = "planet_4"></div>

</body>

</html>

我无法将我的行星定位在我想要的位置似乎很奇怪，我确定我在 background-position 元素上的语法是正确的

【问题讨论】：

标签： css background-position

【解决方案1】：

您没有为您的 div 指定任何位置。尝试将此 CSS 代码添加到其中之一：

top: 50px;
left: 50px;

您会在与其他人不同的位置看到它。也许这是您尝试对背景位置执行的操作，但这是针对背景图像的位置，而不是针对 HTML 元素本身。

希望能帮到你;)

【讨论】：

【解决方案2】：

边距不适用于绝对定位的 div。您需要使用 top、bottom、left 和 right - 值来定位绝对定位的元素。我为您制作了一个 JSFiddle，以便您可以随意更改 left 和 top 值。

Link to JSFiddle

一些更改 css（仅进行了与绝对定位相关的更改，并使 div 具有背景色而不是图像，因此您可以看到 JSFiddle 中发生的情况）

body{
background-image:url('../img/para2/space_bg.jpg');
}

#planet_1{
background:yellow;
height:200px;
width:200px;
position:absolute;
top: 250px;
padding:0;
display:block;
background-position: 400px 400px;
}

#planet_2{
background:green;
height:200px;
width:200px;
position:absolute;
left: 250px;
padding:0;
display:block;
background-position: 800px 600px;
}

#planet_3{
background:blue;
height:200px;
width:200px;
position:absolute;
left: 250px;
top: 250px;
padding:0;
display:block;
background-position:450px 700px;
}

#planet_4{
background:red;
height:200px;
width:200px;
position:absolute;
margin:100;
padding:0;
display:block;
}

除此之外，我看不到您要对正在使用的背景位置值做什么（因为它们高于 div 的高度和宽度）。

【讨论】：