Question

我对这件事感到沮丧。我使用Joomla和Phoca Gallery生成这部分代码：

<img class="pg-image" src="/images/phocagallery/other/thumbs/phoca_thumb_m_something.jpg" alt="Something">

我想要做的是在网站上以缩略图显示的图像上叠加渐变（带有.pg-image类的图像）。由于图像不是背景图像，因此我在互联网上找到的覆盖渐变的所有解决方案都无效。

有什么想法吗？

谢谢！：）

Answer 1

CSS :after not adding content to certain elements

这不能仅通过img标签来完成，你需要为它添加额外的标记，就像将它包含在div中一样。

<!-- http://www.jmonit.com -->
<div class="pg-image">
<img src="http://www.jmonit.com/kettlezoozebraGZ1/wp-content/uploads/2010/09/memcarrd_HD.jpg" alt="Something">
</div>

查看此处的示例

http://codepen.io/jmonit/pen/gbGayg

Answer 2

创建叠加div：

<div class="image">
  <img class="pg-image" src="http://i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2015/1/30/1422631112598/2340075f-69ad-443b-9770-2dd03049f474-bestSizeAvailable.jpeg" alt="Something">
</div>
<div class="overlay"></div>

.overlay {
    background-color: rgba(55, 155, 55, 0.5);
    bottom: 0;
    left: 0;
    opacity: 0.5;
    position: absolute;
    right:0;
    top:0;
    z-index: 1;
}

.image{position: relative;}

Fiddle

使用CSS叠加图像上的渐变

2 个答案: