使用CSS叠加图像上的渐变

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:未向某些元素添加内容后

这不能只通过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