如何使用CSS在没有额外标记的情况下在内嵌图像上获得叠加纹理？

Question

我需要为100多张图片提供叠加纹理

像这样。

我有透明的.PNG纹理文件。如果我将其用作background，那么它将落后于<img>。我不想为纹理和<img>添加其他span或任何额外div，z-index。

在CSS中还有其他方法可以实现吗？

我需要使用特定纹理.png，因此我不能仅使用 CSS渐变。

我不想将主要产品图片用作background。

Answer 1

我担心你会很难将纹理叠加在图像上，而没有添加一些元素来装上它。如果你不能影响html输出，那么一点点javascript就可以了。

另一个选择是使用绝对定位将纹理放在另一个图像的顶部。但是，如果没有更多的背景，很难知道这是否是一个可行的选择。这是一个例子：http://jsfiddle.net/cPSFQ/1/。

Answer 2

很高兴您的帖子标有CSS3

http://jsfiddle.net/WQTeE/2/

您必须创建叠加层的反向遮罩。我在FF9和Chrome 16中进行了测试

img.stockphoto{
    -webkit-mask-box-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
    -o-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
    -moz-mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
    mask-image: url(http://koivi.com/php-gd-image-watermark/watermarks/Sample-trans.png);
}

Answer 3

你可以试试这个。 http://jsfiddle.net/Bs7nv/

在这一切中，我正在做的是显示一个图像和一个div，我们可以使用纹理图像作为背景和绝对定位来显示实际图像。

Answer 4

您的问题没有纯css解决方案，跨浏览器兼容。我意识到这个答案不符合你的原始标准，但我认为我还是会提供它，以便你可以选择它。

使用伪元素（:before）将是CSS3的合理选择，但是，它们不适用于img标签。

你必须做点什么，而是改变标记或添加一些javascript。假设您无法编辑标记（有时您无法控制源数据），但可以控制javascript，您可以使用纯xavascript来执行此操作：

var transparentImage = "http://rd.cas.de/tim/native/image.png";
var imageList = document.getElementsByTagName("img");
var arrImages = [];
for (var i = 0; i < imageList.length; i++ ) {
   // store the images as is first, otherwise the list is living and
   //  you loop forever...
   arrImages.push(imageList[i]);
}

for (i = 0; i < arrImages.length; i++ ) {
   // first wrap all the images in a relative positioned div.
   var wrapper = document.createElement('div'); 
   var newImg = document.createElement("img");
   newImg.setAttribute("src", transparentImage);
   newImg.style.position = "absolute";

   wrapper.appendChild(newImg);
   wrapper.appendChild(arrImages[i].cloneNode(true)); 
   arrImages[i].parentNode.replaceChild(wrapper, arrImages[i]);

}

这是一个jsfiddle可以做你想要的（但是使用javascript）。