css背景位置-png图像未按css中的位置显示_Css_Background Position

css背景位置-png图像未按css中的位置显示

css

css背景位置-png图像未按css中的位置显示,css,background-position,Css,Background Position,由于某些原因，背景位置不起作用，我正在尝试设置各种填充PNG的行星div，这样我就可以进行一些其他编码，但图像都是堆叠在一起的，其中一些图像是在div上切割的 CSS: html: 基本视差鼠标2 看起来很奇怪，我无法将我的行星定位到我想要的位置，我确信我在背景位置元素上的语法是正确的你没有给你的div任何位置。尝试将此CSS代码添加到其中一个： top: 50px; left: 50px; 你会在不同的位置看到它。也许这是您试图对背景位置所做的，但这是针对背景图像的位置，而不是HTML

由于某些原因，背景位置不起作用，我正在尝试设置各种填充PNG的行星div，这样我就可以进行一些其他编码，但图像都是堆叠在一起的，其中一些图像是在div上切割的

CSS:

html:


基本视差鼠标2

看起来很奇怪，我无法将我的行星定位到我想要的位置，我确信我在背景位置元素上的语法是正确的

你没有给你的div任何位置。尝试将此CSS代码添加到其中一个：

top: 50px;
left: 50px;

你会在不同的位置看到它。也许这是您试图对背景位置所做的，但这是针对背景图像的位置，而不是HTML元素本身

希望我能帮助你；）

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

css的一些更改（只做了与绝对定位相关的更改，并使div具有背景色而不是图像，这样您就可以看到JSFIDLE中发生了什么）

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

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

top: 50px;
left: 50px;

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;
}