Изображение за заголовком и смещением по X и Y - PullRequest
Новая
       6

Изображение за заголовком и смещением по X и Y

0 голосов
/ 29 мая 2011

Используя CSS, как я могу отобразить изображение позади некоторого текста, а также сместить его по осям X и Y?

У меня есть дизайн шириной 950 пикселей, поэтому я хочу, чтобы это изображениечтобы оставаться «синхронизированным» с остальной частью заголовка, поместив его в контейнер с центром и шириной 950 пикселей.

Моя проблема в том, что вместо изображения «слой позади» текста заголовка,вместо этого он отображает изображение полностью и нажимает на остальное содержимое.

Любая помощь очень ценится.

ИЗОБРАЖЕНИЕ, ДОБАВЛЕННОЕ ДЛЯ УТОЧНЕНИЯ Clarification Image

Спасибо, Энди.

Ответы [ 3 ]

0 голосов
/ 29 мая 2011

Вы имеете в виду что-то вроде в этом примере ?

Ок, это более понятно. Теперь я уверен, что это то, что вы хотите .

0 голосов
/ 29 мая 2011

См .: http://jsfiddle.net/Fx5q3/

CSS: 

#container {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    background: rgba(127,127,127,0.7);

    position: relative
}
#behindImage {
    background: url(http://dummyimage.com/150x150/f0f/fff) no-repeat;
    width: 150px;
    height: 150px;
    position: absolute;
    top: -30px;
    left: -90px;
    z-index: -1
}

HTML: 

<div id="container">
    <div id="behindImage"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis  volutpat blandit. Morbi bibendum pharetra bibendum. Fusce sit amet  lobortis odio. Proin ultricies, massa vel ornare fringilla, diam sem  convallis arcu, nec laoreet massa leo nec dolor. Nullam vel massa  ligula. Donec semper eros dapibus nibh dictum egestas ac nec libero.  Maecenas et fringilla augue. Phasellus imperdiet urna in sem scelerisque  adipiscing.</p>
</div>
0 голосов
/ 29 мая 2011

используйте значения Процент в ваших фоновых позициях в вашем CSS 

.divName {
   background-position: 50%;

}

или используя такие слова, как верх или низ ...

См. Полный список значений здесь

ОБНОВЛЕНИЕ; * +1010 *

использовать изображение в качестве фонового изображения вместо встроенного HTML-изображения 

<div class='content'>
    <p> Some content</p>
    <p> More content</p>
    .... even more content ...
</div>

Теперь css: 

div.content {
   background-image: url('image path');
   background-position: 50%;
}

Таким образом, изображение всегда будет позади контента, и оно будет в центре div.

...