CSS的光泽图像

Question

我想申请this code：

/* Glossy overlay */

html {
  min-height: 100%;
  background: linear-gradient(#000, #445);
}
figure {
  width: 162px;
  height: 162px;
  margin: 24px auto;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  border-radius: 5px;
}
figure img {
  display: block;
  border-radius: 5px;
}
figure:after {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask: url(http://daneden.me/labs/albums/images/mask.svg#mask);
}

<figure>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</figure>

但我不想将它应用于div元素，我想将它应用于每张照片（通过a img我该怎么做？

Answer 1

  

我想将它应用于每张照片（通过a img）

如果每张图片都在<a>内，您只需将CSS更改为定位a，a img和a:after。确保<a>为display: block或display: inline-block;

实施例

/* Glossy overlay */

html {
  min-height: 100%;
  background: linear-gradient(#000, #445);
}
a {
  display: inline-block;
  width: 162px;
  height: 162px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
  border-radius: 5px;
}
a img {
  display: block;
  border-radius: 5px;
}
a:after {
  position: absolute;
  pointer-events: none;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask: url(http://daneden.me/labs/albums/images/mask.svg#mask);
}

<a>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>

<a>
  <img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>