Получить CSS-вставку с теней для отображения поверх внутреннего фона

Я хочу, чтобы вложенные тэги CSS-вставки появлялись поверх элементов внутри контейнера с теневой коробкой, в частности фоновых цветов дочерних элементов.

Демо: http://jsfiddle.net/Q8n77/

<div class="parent">
    foo
    <div class="content">bar</div>
</div>

<style>
.parent {
    box-shadow : inset 0 0 5px 0 black;
}

.content {
    background : #EEE;
}
</style>

Любые идеи? Может делать что-то с HTML, но нужно иметь возможность прокрутки, поэтому нет 100% ширины/высоты DIV поверх всего.

Ответы

Ответ 1

Если все, что вам нужно, - это показать теней вставки в цвете фона, вы можете использовать прозрачные rgba (или hsla) цвета а не шестнадцатеричные коды;

.parent {
    box-shadow: inset 0 0 5px 0 black;
}

.content {
    background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

Демо на http://jsfiddle.net/Q8n77/7/

Ответ 2

вы можете попытаться расположить оверлейный div поверх своего родителя с положением: absolute; и дайте теневой (непроверенной теории) что-то вроде этого:

HTML

<div class="parent">
    <div class="overlay"></div>
    foo
    <div class="content">bar</div>
</div>

CSS

.parent {  
    position: relative;
}

.content {
    background : #EEE;
}

.parent .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow : inset 0 0 5px 0 black;
}

Ответ 3

Не все имеют возможность изменять структуру HTML. Если вы можете получить доступ только к CSS, вы можете попробовать следующее из этого сообщения: fooobar.com/questions/34159/...

В качестве альтернативы вы можете использовать псевдоэлемент:

HTML:

<div>
    a
</div>

CSS

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Ответ 4

Одна из возможностей - играть с padding.

.parent {
    box-shadow : inset 0 0 5px 0 black; padding:.23em;
}

http://jsfiddle.net/jasongennaro/Q8n77/6/

Ответ 5

Добавление этого подхода, поскольку именно так я решил свою версию этой проблемы.

Я в основном добавляю:: раньше или другой элемент с теневой теневой матрицей в родительском объекте, но смещаю его так, чтобы отображалась только теневая часть. Также я даю родительскому переполнению: скрытый. Таким образом, контент должен быть интерактивным.:)

Пробег может варьироваться в зависимости от точной разметки. Но подумал, что я должен добавить это здесь.

codepen: http://codepen.io/mephysto/pen/bNPVVr

.parent {
  background:#FFF;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.parent::before{
  content:"";
  display:block;
  width:100%;
  height:25px;
  margin-top:-25px;
  box-shadow : 0px 0px 25px 0px rgba(0,0,0,0.9);
}

Ответ 6

Вы можете установить shadow-shadow для обоих родительских и дочерних элементов.

Ответ 7

Если вам нужна только тень сверху, это сделает это:

.element 
{
    box-shadow:inset 0px 3px 3px #BBB;
}