css background-position - png изображения не отображаются, как указано в css

-1

почему-то фоновая позиция не работает. Я пытаюсь настроить множество планетных divs, заполненных png, чтобы затем я мог сделать некоторую другую кодировку, но изображения все выглядят сложены друг на друга, а некоторые из них разрезаются через div.css background-position - 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

Вы не указали ни одной позиции своим дивизиям. Попробуйте добавить этот CSS код к одному из них:

Вы увидите его в ином положении, чем другие. Возможно, это то, что вы пытались сделать с фоновой позицией, но это для позиции фонового изображения, а не для самого HTML-элемента.

Надеется, что я мог бы вам помочь;)

источник

2014-10-28 03:10:13 YanYan

Маржи не работает на позиционировано абсолютно дивов. Вам нужно использовать верхние, нижние, левые и правые значения для позиционирования элемента с абсолютным позиционированием. Я сделал JSFiddle для вас, чтобы вы могли беспорядочно менять левые и верхние значения.

Link to JSFiddle

Некоторые изменения CSS (только были внесены изменения, связанные с абсолютным позиционированием и сделал дивы имеют цвет фона вместо изображения, так что вы можете увидеть, что происходит в 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 background-position - png изображения не отображаются, как указано в css

ответ

Смежные вопросы