Как сделать изображение «зависанием» над фоном?

Я скорее веб программист, чем дизайнер, но в настоящее время моя работа требует от меня больше узнать о веб-дизайне. Извините, если вопрос наивен для профессионалов.Как сделать изображение «зависанием» над фоном?

Застрял в этой проблеме в течение нескольких часов, не знаю, что делать ...

Пожалуйста, перейдите на мой блог и проверить нижнюю часть: my blog

Он имеет восковую печать стиль подача Уилкок , с лентой. Я хочу, чтобы лента лежала выше цвета фона (например, пергаментная бумага), чтобы отобразить деревянный фон. Но я провалился в этом часами. Сделали некоторые исследования онлайн и попробовали несколько разных способов. Все еще не повезло.

визуальный эффект, который я хочу, чтобы достичь можно найти на этой странице: Образ отца и его ребенок показывает, что я хочу иметь: http://www.havocinspired.co.uk/

Пожалуйста, используйте FireBug и проверить мои таблицы стилей CSS. Я использую инструмент под названием Artiseer, чтобы помочь мне разобраться в основах. Так что, возможно, так все выглядит так грязно под капотом.

Большое спасибо!

источник

2009-11-03 Michael Mao

Возможно, вы получите более качественные/быстрые ответы по адресу http://doctype.com –

Привет, Джим: Спасибо за ваш совет. Я пойду и посмотрю там! –

Попробуйте отрицательно отойти margin-bottom.

источник

2009-11-03 01:58:14 mpen

Hello Mark: Пробовал, но все еще не мог понять это таким образом ... –

Пробовал снова, на этот раз нашел правильный тег div, чтобы дать ему отрицательное нижнее поле! Оно работает! –

Я уверен, что это сработало, но это скорее неряшливость на вершине неряшливости. Мой ответ забирает часть плохого кода для устранения проблемы. Просто мое мнение. Без обид. –

Вам нужно изменить HTML к этому:

<div class="art-Footer"> 
    <div class="art-Footer-background"> 
    <div class="art-Footer-inner"> 
     <a href="http://chenximao.net/blog/feed/" class="art-rss-tag-icon" title="RSS"></a> 

    </div> 
    </div> 
</div>

Затем изменить стили (изменить соответствующие стили к тому, что вы видите ниже, или сравнить, Что ниже того, что вы должны найти то, что я взял) :

.art-Footer {margin: 20px auto 0; позиция: относительная; ширина: 884px; z-index: 0; }

.art-Footer .art-Footer-background { background-image: url (images/Footer.png); background-repeat: repeat; внизу: 45px; высота: 75px; Слева направо: 0; вертикально-выровненный: сверху; ширина: 884px; z-index: -1; }

.art-Footer .art-Footer-inner { padding: 5px; позиция: относительная; text-align: center; Z-индекс: 0; }

.art-rss-tag-icon { background-image: url (images/rsssealicon.png); background-position: left top; background-repeat: no-repeat; дисплей: блок; плыть налево; высота: 100px; margin: 0 -120px 0 50px; позиция: относительная; верх: -11px; ширина: 62px; }

источник

2009-11-03 01:55:20

http://i35.tinypic.com/2vwibna.jpg Привет, Джордж. Выше, как это выглядит под моим браузером FireFox 3.5. –

А, я вижу это сейчас. Я смотрел на неправильную «восковую печать». Хорошо, ну, ваш нижний колонтитул выглядит немного сложнее для меня. Ничего страшного. Поместите .art-Footer-фон вокруг .art-Footer-inner.На .art-Footer сделайте его margin 0 auto; и снять переполнение: спрятать, взять позицию: абсолютное от .art-Footer-background. Теперь вы можете перемещать ленту сверху и слева. Старайтесь избегать таких вещей, как переполнение: скрытые, отрицательные маги, такие вещи. Они запутываются. Используйте их экономно. Это больше похоже на то, что вы ищете? –

Как сделать изображение «зависанием» над фоном?

ответ

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