带有 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>