Question

我正在尝试在我的图片上应用Alpha叠加层。现在，它应用于整个页面，而不仅仅是图像。帮助

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

Answer 1

申请css代码

<!-- begin snippet: js hide: false -->

<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);
}
.dimmed{
    position: relative;
    display: inline-block;
}
.dimmed img{vertical-align: top;

Answer 2

这应该可以解决问题：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;
}

Answer 3

请尝试以下操作： Demo

<强> CSS：

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

/* newly added code */

.dimmed { 
    position: relative;
    display:inline-block;
}

在图像上应用CSS Alpha叠加层

3 个答案: