CSS Layout CSS и HTML

Question

Я пытаюсь создать простую страницу (только с использованием HTML и CSS), но у меня возникают трудности с некоторыми элементами: здесь я приложил ссылки, чего хочу, и что я сделал.

Вопрос:

1. Как я могу положить розовый фон перекрываться весь текст и изображения?

• Я попытался сделать это в CSS:

  #setBackground {
position:absolute; left:0px; top:0px; z-index:-1;
}

• И в HTML:

  <div id="setBackground">
<img src="/images/pinkbg.png" alt="Background"/> </div>

• Но все еще не работало.

Я знаю, что это не фантазия, но если бы вы могли дать мне несколько предложений, было бы очень полезно. Благодарю.

Answer 1

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

background-color: rgb(245,195,195); 

Вот пример того, как макет фона: http://jsfiddle.net/EAHQw/6/

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

Я пошел и сделал более полный пример. http://jsfiddle.net/GEwYJ/2/

Вы увидите, что я обманул круги, но вы можете легко сделать это изображение в программе редактирования изображений, поддерживающей 3D-поворот. Возможно, вы могли бы сделать это с чистым css, но я недостаточно хорош с преобразованиями для этого, и, вероятно, было бы проще сделать это только с изображением. Также я сделал его меньше, чтобы он лучше вписывался в коробку. Это не идеальная копия, но она может пройти в близком приближении.

Также я использовал смесь идентификаторов имен классов и селекторов psudo, чтобы показать различные способы применения стилей. В производственной среде было бы лучше иметь более согласованную структуру.

Answer 2

1. с синтаксисом г-индекса в вашем CSS файле

2. , что представляет собой изображение. или вы можете попробовать его с CSS3 ... (www.w3schools.com)

3. создать поле DIV с именем 'окно' или что-то подобное, что и в файле CSS:

    
   #box { 
   position: absolute; 
   width: 100%; 
   height: 20px; 
   background-color: red; 
   } 
   

4.

position: absolute; 
width: 100px; 
height: 100px; 
top: 200px; 
left: 50px; 
background-color: black; (example... works with % instead of px, too) 

5.

margin: right; (CSS works only if your text is in a div-box) 

удачи