положить тень вставки на изображение или изображение внутри div - PullRequest
Новая
       0

положить тень вставки на изображение или изображение внутри div

6 голосов
/ 07 января 2012

На моей странице есть изображение, на которое я хочу нанести тень на вставку. Я попытался сделать это с изображением как внутри, так и снаружи, div. Может ли кто-нибудь помочь мне получить тень от вставной рамки для отображения?

HTML: 

<body>

<div id="logo">
<img src="images/key.jpg"  width="3%" height="3%"/>
</div>

<a href="scene2.html" class="next">Next</a>
<a href="abduction.html" class="back">Back</a>

<img src="images/scene1.jpg"  width="650" height="650" class="backing"/>

</body>
</html>

CSS 

.backing {
    position:relative;
    z-index:-10;
    float:left;
    margin-left:12%;
    box-shadow: 0 0 -50px -50px  #FFF;
        -moz-box-shadow:  0 0 -50px -50px  #FFF;
        -webkit-box-shadow:  0 0 -50px -50px  #FFF;

}

.next {
    position:relative;  
    margin-left:8%;
    z-index:200;
}

.back {
    position:relative;
    margin-left:2%;
    z-index:220;

}

Ответы [ 5 ]

11 голосов
/ 05 мая 2014

Вставка Box-shadow не будет работать на изображении, вам нужно создать div и дать box-shadow этому div и поместить изображение внутри этого div.

Вы также можете использовать отрицательный z-index дляэлемент img, и используйте box-shadow со значением inset для элемента div. 

div {
    position: relative; /* Not required now */
    margin: 10px;
    float: left;
    box-shadow: inset 0 0 12px blue;
    border-radius: 50%;
}

div img {
    display: block;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
    z-index: -1;
}

Demo

6 голосов
/ 03 декабря 2014

Другие ответы, которые предлагают z-index, имеют проблему, если поместить в контекст, в моем случае изображение исчезло за основным div. Предотвращение этого включает установку z-index: 1; (и нестатического положения) для всех элементов-предков, что является проблематичным и может привести к поломке существующего макета.

Я нашел чистое решение, которое не требует прикосновения ко всем элементам предка.

Я наконец-то понял это с помощью Понимание z-index - контекст стекирования

HTML

Разметка остается такой: 

<div class="box-shadow">
    <img src="/images/graphic.jpg" />
</div>

Задача состоит в том, чтобы поместить div-оболочку и изображение в единый контекст стека. Для этого вы должны применить стили к элементу parent .

Контекст стека CSS

Согласно связанной статье, следующие элементы создают контекст стека:

  • корневой элемент (HTML),
  • позиционируется (абсолютно или относительно) со значением z-index, отличным от "auto",
  • гибкий элемент со значением z-index, отличным от «auto»,
  • элементов со значением непрозрачности меньше 1. (См. Спецификации для непрозрачности),
  • элементы со значением преобразования, отличным от "none",
  • элементы со значением режима смешивания, отличным от «нормального»,
  • элементы с изоляцией, установленной на «изолировать»,
  • на мобильных WebKit и Chrome 22+, position: fixed всегда создает новый контекст стека, даже если z-index равен «auto»
  • указание любого атрибута выше в завещании, даже если вы сами не пишете

Если мы сосредоточимся на параметрах, которые имеют смысл для этого варианта использования, у нас есть эти альтернативы, если исходный элемент элемента .box-shadow равен #parent:

1. Позиционирование и z-индекс:

Вот что я бы выбрал, если это возможно: 

#parent {
    position: relative;
    z-index: 0;
}

2. Непрозрачность

Если родительский элемент должен иметь другой атрибут позиции или добавление z-index имеет нежелательные побочные эффекты, вы можете использовать значение непрозрачности, равное почти 1, чтобы оно не имело видимого эффекта, но все равно создает контекст суммирования: 

#parent {
    opacity: 0.999;
}

Наконец, тень CSS

Затем вы можете наложить тень на div и переместить изображение позади него с z-index: 

.box-shadow {
    box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
    display: block;
    position: relative;
    z-index: -1;
}
5 голосов
/ 13 марта 2015

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

.box-shadow
{
  background-color: #fff;
  height: 235px;
  margin: 32px 24px;
  text-align: center;
  width: 500px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.box-shadow::after
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 10px 10px #000;   
  -moz-box-shadow: inset 0 0 10px 10px #000;
  box-shadow: inset 0 0 10px 10px #000;
  border-radius: 50%;
  overflow: hidden;
}
<div class="box-shadow">
    <img src="http://www.google.com/logos/2012/addams11-hp.jpg" />
</div>
3 голосов
/ 10 апреля 2016

Вот простой, современный и современный подход псевдоэлементов CSS для размещения тени блока «поверх изображения» , поскольку сами теги img не поддерживают псевдоэлементы.

HTML: 

<div class="box-shadow">
    <img src="http://i.stack.imgur.com/8LzBY.jpg" />
</div>

CSS: 

.box-shadow {
    position: relative;
    text-align: center;
}

.box-shadow::after {
    box-shadow: inset 0 0 10px 10px #000;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.box-shadow img {
    max-width: 100%;
    width: auto;
}

Image with Box Shadow Overlay

Просмотретьсопровождающий JSFiddle .

0 голосов
/ 07 января 2012 

.backing {
    position:relative;
    z-index:-10;
    float:left;
    margin-left:12%;
    box-shadow: inset 0 0 50px 50px  #FFF;
    -moz-box-shadow: inset 0 0 50px 50px  #FFF;
    -webkit-box-shadow: inset 0 0 50px 50px  #FFF;

}

.next {
    position:relative;  
    margin-left:8%;
    z-index:200;
}

.back {
    position:relative;
    margin-left:2%;
    z-index:220;

}
<div id="logo">
  <img src="//picsum.photos/100"  width="3%" height="3%"/>
</div>

<a href="scene2.html" class="next">Next</a>
<a href="abduction.html" class="back">Back</a>

<img src="//picsum.photos/650"  width="650" height="650" class="backing"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...