使用 CSS 在图像上叠加渐变答案

【问题标题】：Overlay gradient over image with CSS使用 CSS 在图像上叠加渐变
【发布时间】：2015-02-02 03:08:27
【问题描述】：

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

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

我想要做的是在网站上显示为缩略图的图像（具有 .pg-image 类的图像）上叠加渐变。由于该图像不是背景图像，因此到目前为止我在互联网上找到的所有叠加渐变的解决方案都不起作用。

有什么想法吗？

谢谢！ :)

【问题讨论】：

嗯，我发现的一切都指向使用“:before”选择器，然后应用渐变背景。
不知何故 StackExhange 没有正确显示代码，请检查上面更正的代码。

标签： css image joomla overlay

【解决方案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

【讨论】：

不错。这个答案对我有帮助

【解决方案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

【讨论】：

那将是完美的解决方案，但 Joomla 生成代码，而不是我，所以我不能真正创建新的 div。至少我不知道怎么做。
您可以在图库插件模板中添加标记，但更好的解决方案是寻找另一个插件来满足您的需求或自己构建查看器。我可以推荐 Caroufredsel 脚本，它有很多很棒的图片库，也可以根据您的喜好进行定制。 [链接]coolcarousels.frebsite.nl