css 图片阴影叠加_如何仅使用CSS叠加盒形阴影效果

内容覆盖是现代网页设计的重要组成部分。 它们可以帮助您隐藏网页上的元素 ，然后在得到用户批准的情况下将其显示出来 ，并显示其他信息或控件，例如其背后的按钮。

典型的叠加层是半透明的 ， 背景颜色为纯色 （通常为黑色），上面有一些文本或按钮供用户查看或交互。 发生交互（单击或悬停）后，叠加层将被移除并显示其下方的内容 。

在本文中，我们将研究如何通过使用纯CSS 向图像添加彩色叠加层 。 您可以在下面的演示中看到最终结果。 将图像悬停在图像上，使叠加层显示出神奇宝贝。 尽管本文讨论了图像，但是其提出的技术也可以安全地应用于其他内容类型（例如文本块）。

避免添加额外HTML元素

覆盖通常是通过在要覆盖的元素上方放置一个opacity值小于1 的额外HTML元素来创建的。 问题在于该技术涉及为覆盖使用额外的元素（或伪元素）。

如果您不是HTML大小的书呆子，那么额外的覆盖元素可能就没什么大不了的，因为它很可能不会对任何网络的带宽造成太大的负担。 但是，为元素及其覆盖设置单独的样式规则仍然会损害CSS的可读性和可维护性 。

为了使代码井井有条，并且不会弄乱HTML轮廓 ，使用仅CSS的解决方案是更好的选择。

使用

那么，如何实际创建仅CSS的叠加层呢？ 借助box-shadow CSS属性。 盒子阴影非常适合这项工作，因为什么是覆盖层，但元素上投射了黑影 ？

盒子阴影具有称为inset的属性值，该属性值使阴影出现在盒子框架的内侧 。

阴影大小为元素宽度和高度的一半或一半以上的插入框阴影会创建覆盖整个元素的阴影。

.box {
width: 200px;
height: 200px;
box-shadow:  green 0 0 0 100px inset;
}

阴影覆盖整个元素

由于叠加层通常具有一定的透明度 ，因此您也需要将其添加到框阴影中。 这可以通过将rgba()函数用于阴影color来完成 。

rgba的rgb部分代表红色，绿色和蓝色通道值，而a代表负责透明性的alpha通道 。

对于Alpha通道，值1将创建不透明的颜色 ，而值0将创建完全透明的颜色 。

通过为框阴影的rgba颜色值的alpha通道分配0到1之间的值，可以创建半透明的叠加层 。

为演示创建代码

我们的演示将显示不同口袋妖怪的图像和名称。 在这里，我们将只为演示中的第一个宠物小精灵Bulbasaur创建代码，其他代码的制作方法相同（在Codepen上，您也可以查看它们的代码）。

HTML

对于HTML，我们只需要创建一个框 ，即可使用CSS向其中添加其他所有内容。

<div id="bulbasaur" class="pokemon"></div>

CSS

在下面CSS中， .pokemon元素显示神奇宝贝图像，并且.pokemon::after伪元素带有神奇宝贝的名称。

由于box-shadow属性可以采用多个值来渲染多个阴影 ，所以除了覆盖阴影之外，我还为.pokemon和.pokemon:hover元素添加了其他灰色阴影，以达到美观的目的。

/* pokemon pictures */
.pokemon {
  width: 200px;
  height: 200px;

  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;

  /* overlay */
  box-shadow: 0 0 0 100px inset,
      0 0 5px grey;

  /* hover-out transition */
  transition: box-shadow 1s;
}

/* pokemon names */
.pokemon::after {
  width: 80%;
  height: 80%;
  display: block;
  font:  16pt 'bookman old syle' ;
  color: white;
  border: 2px solid;
  text-align: center;

  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;

  /* hover out transition */
  transition: opacity 1s .5s;
}

/* reveal pokemon picture on hover */
.pokemon:hover {
  transition: box-shadow 1s;
  box-shadow: 0 0 0 5px inset,
  0 0 5px grey,
  0 0 10px grey inset;
}

/* hide pokemon name on hover */
.pokemon:hover::after {
  transition: opacity .5s;
  opacity: 0;
}

当.pokemon元素悬停时，需要更改其盒子阴影以显示后面的图像。

您可以看到.pokemon:hover选择器获得了一个新的框阴影，该阴影除去了覆盖层，而.pokemon:hover::after选择器通过使用opacity属性隐藏了神奇宝贝的名称。

您可能还已经注意到.pokemon和.pokemon:hover样式规则中的覆盖框阴影中没有颜色值 。 各个神奇宝贝的叠加盒阴影颜色需要在其各自的样式规则中指定，因为它们彼此不同。

由于box-shadow 没有任何longhand属性 ，因此无法使用box-shadow-color类的东西分别设置其阴影box-shadow-color ； 相反，我们使用color属性。

默认情况下，当您为color属性指定一个值时，该值将同时应用于边框，轮廓和框阴影颜色 。 因此，您可以简单地使用color属性为框阴影添加颜色。

#bulbasaur {
  background-image: url(https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg);
  /* color value used for box shadow color */
  color: rgba(71, 121, 94, 0.9) ;
}

#bulbasaur::after{
  /* pokemon name */
  content: 'Bulbasaur';
}

覆盖阴影的颜色使用上述rgba()函数rgba() α值为0.9 rgba()来使覆盖透明。

除了覆盖框阴影的颜色以外，上述CSS还为每个神奇宝贝添加了单独的规则-图像作为background-image和名称。

就是这样，我们已经准备好使用仅CSS的彩色图像叠加层。 看一下下面笔中所有宠物小精灵的代码。

翻译自: https://www.hongkiat.com/blog/css-only-overlays-box-shadow/