html - 在图像上应用CSS Alpha叠加层

我正在尝试在图像上应用Alpha叠加层。现在，它已应用到整个页面，而不仅仅是图像。救命？

http://jsfiddle.net/21ku3o7f/

<div class="dimmed">
    <img src="http://placehold.it/300x300" />
</div>

.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}

最佳答案

这应该可以解决问题：http://jsfiddle.net/21ku3o7f/1/

<div class="dimmed">
  <img src="http://placehold.it/300x300" />
</div>

.dimmed {
  display: inline-block;
  position: relative;
}
.dimmed:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}
.dimmed img {
  display: block;
}

关于html - 在图像上应用CSS Alpha叠加层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28626557/