Предотвращение появления повторяющегося фона через смещенные прозрачные дочерние элементы?

Question

Итак, у меня есть макет, где у меня есть повторяющийся прозрачный теневой элемент, установленный на фоне моего родительского элемента контейнера.Установите его сверху и, предположительно, завис над самым верхним краем этого фона. Предполагается, что это изображение с рамкой и тенью.

Однако, поскольку рамка изображения продолжает родительский элемент, фоновое изображение также продолжаетсявверх.Это видно по вертикальным линиям над верхним краем тени кадра.Смотрите скриншот ниже:

Это происходит независимо от того, использую ли я прозрачное изображение или свойство box-shadow в CSS3.Установка отрицательных полей не помогает вывести их из родительского элемента, а также не устанавливает относительное или абсолютное позиционирование.

Обычно я бы пытался «подделать» эффект прозрачности, установив сплошное изображение наверхний край рамки изображения, но есть повторяющийся узор штукатурки, установленный в качестве фона тела, что означает наличие видимого, неестественно выглядящего края.(Вставьте cursing re: повторяющиеся узоры здесь.)

Любые предложения о том, как можно предотвратить отображение фона родительского элемента через дочерний элемент или каким-либо образом сместить рамку изображения?

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

Answer 1

Я понял это.

Я модифицировал тему WordPress TwentyEleven, в которой есть #primary и #secondary div в виде плавающих над основным содержимым div.Для того, чтобы фон расширялся до самого конца содержимого div (т. Е. После двух перемещений), я установил overflow: на auto.

, так как мне не нужноfloat что угодно (теперь это один столбец без боковой панели), я удалил оба float и удалил объявление переполнения, которое у меня было.Тах-да, теперь все работает.

Если кто-то еще находит себя в этом вопросе, взгляните на мой jsFiddle , который я использовал, чтобы выяснить это.Спасибо Paker за предложение.