Самый элегантный способ добиться этого CSS-макета в одну колонку с несколькими фонами - PullRequest
Новая
       25

Самый элегантный способ добиться этого CSS-макета в одну колонку с несколькими фонами

1 голос
/ 17 ноября 2011

Какой самый простой и элегантный способ получить следующий макет из одной колонки с использованием CSS2.1 / CSS3, чтобы он выглядел одинаково в Firefox / Chrome / Opera?

У меня есть желтый фон, состоящий из 3 изображений (header.png, повторение middle.png и footer.png) и красный абзац текста (переменная высота). Я хочу, чтобы текст частично покрывал изображение верхнего и нижнего колонтитула (как на иллюстрации ниже). Фон вне желтой рамки должен быть прозрачным.

example

Одним из решений является один большой с несколькими фонами и отступами: 

<div style="background: url(header.png) no-repeat center top, url(footer.png) no-repeat center bottom; padding: 50px;">
    <p>A lot of text...</p>
</div>

Но тогда как насчет среднего фона? Если я добавлю его к нескольким фонам с repeat-y, он будет виден под прозрачными частями header.png и footer.png.

Есть идеи? Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 17 ноября 2011

Я бы использовал псевдоэлементы!IMO - самый элегантный способ реализовать что-то подобное - и довольно неплохо поддерживаемый.

Я сделал быстрый jsfiddle, обрисовав в общих чертах мое решение:

http://jsfiddle.net/vfdFR/6/

Ваши изображения радуютне показывает, но это должно работать хорошо - примените повторяющийся фон к элементу div и изображениям верхнего и нижнего колонтитула к div: before и div: after соответственно и с небольшим z-index все должно выглядеть правильно

надеюсь, что это поможет

0 голосов
/ 17 ноября 2011

Более совместимый, но более хакерский метод - использовать 4 <div> с.Один <div> содержит абзац текста.(ОК, так что это может быть <p>, что угодно.) Оно содержится в середине внешних трех <div> с, каждый из которых имеет одну часть фона.Отрицательные поля в тексте (и, возможно, z-index в середине <div>) позволяют ему перекрывать верхнее и нижнее изображения.

Менее хакерский, но менее совместимый метод - использовать один внешний <div>и border-image , который рисует фон.Вам все равно понадобятся отрицательные поля в тексте для расширения до верхней и нижней частей границы.

...