css背景位置 - PNG图像不显示为在css中定位

-1

由于某种原因背景位置不工作我想设置各种行星divs充满pngs，所以我可以做一些其他的编码，但是图像都显示在彼此的顶部，其中一些在整个div上切割。css背景位置 - PNG图像不显示为在css中定位

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>

似乎很奇怪的是，我不能放置我的星球，我想，我敢肯定，我有语法的背景位置正确元素

来源

2014-10-28 Heath Ward

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

你会看到它在比别人不同的位置。也许这是你想要做的背景位置，但这是一个背景图像的位置，而不是HTML元素本身。

希望我能帮助你;）

来源

2014-10-28 03:10:13 YanYan

页边距不工作的绝对定位的div。您需要使用顶部，底部，左侧和右侧的值来定位绝对定位的元素。我为你制作了JSFiddle，这样你就可以改变左边和上边的值。

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

除此之外我没有看到你正在使用你正在使用的背景位置值（因为它们高于divs的高度和宽度）。

来源

2014-10-28 03:24:41 RMo

css背景位置 - PNG图像不显示为在css中定位

回答

相关问题