Question

我的页面上有一个图像，我想在其上放置一个插入框阴影。我已尝试用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;

}

Answer 1

Box-shadow inset对图像不起作用，你需要创建一个div并给该div提供box-shadow并将图像放在div中。

你也可以在img元素上使用负z-index，并在div元素上使用带有插入值的box-shadow。

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

Answer 2

提出z-index的其他答案如果放入上下文就有问题，在我的情况下，图像消失在主div之后。防止这种情况涉及将z-index: 1;（和非静态位置）设置为所有祖先元素，这是有问题的，并且可能会破坏大量现有布局。

我找到了一个干净的解决方案，无需触及所有祖先元素。

我终于在Understanding z-index - The Stacking Context

的帮助下弄明白了

HTML

标记保持如下：

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

挑战在于将包装器div和图像放入单个堆叠上下文中。为此，您必须将样式应用于父元素。

堆叠上下文CSS

根据链接文章，以下元素创建堆叠上下文：

根元素（HTML），

定位（绝对或相对）z-index值不是“auto”，

z-index值不是“auto”的弹性项目，

不透明度值小于1的元素。（请参阅不透明度规范），

变换值不是“none”的元素，

混合混合模式值不是“正常”的元素，

将隔离设置为“隔离”的元素，

在移动WebKit和Chrome 22+上，position：fixed总是创建一个新的堆叠上下文，即使z-index是“auto”

指定上面的任何属性，即使你不直接写自己也会改变

如果我们专注于对这个用例有意义的选项，我们有这些替代方案，假设.box-shadow元素的父元素是#parent：

1。定位和z-index：

如果可能的话，我会选择这个：

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

2。不透明度

如果父元素需要具有不同的位置属性或添加z-index具有不需要的副作用，则可以使用几乎 1的不透明度值，以使其没有可见效果但仍然创建堆叠上下文：

#parent { opacity: 0.999; }

最后，影子CSS

然后你可以在div上应用阴影并使用z-index移动img：

.box-shadow { box-shadow: 0 0 10px 6px white inset; } .box-shadow img { display: block; position: relative; z-index: -1; }

Answer 3

这里发布的大多数解决方案都存在父元素的问题，一个简单的解决方案就是使用伪元素：

＆＃13;

.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;
}

＆＃13;

<div class="box-shadow">
    <img src="http://www.google.com/logos/2012/addams11-hp.jpg" />
</div>

＆＃13;

Answer 4

.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"/>

在div中的图像或图像上放置插入框阴影

4 个答案:

HTML

堆叠上下文CSS

1。定位和z-index：

2。不透明度

最后，影子CSS