Как получить наложение текстуры поверх встроенного изображения без дополнительной разметки с помощью CSS?

Question

Мне нужно добавить оверлейную текстуру для 100+ изображений

, как это.

У меня есть прозрачный .PNG файл текстуры.если я использую это как background, тогда оно пойдет за <img>.И я не хочу добавлять еще <img> или какие-либо дополнительные span, div для текстуры и z-index.

Есть ли другой способ добиться этого в CSS?

Мне нужно использовать конкретную текстуру .png, поэтому я не могу использовать CSS-градиент * только 1023 *.

Я не хочу использовать изображение основного продукта как background.

Answer 1

Рад, что ваш пост помечен 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 2

Боюсь, вам будет очень трудно наложить эту текстуру на изображение без какого-либо дополнительного элемента, чтобы надеть его. Если вы не можете повлиять на вывод html, небольшой javascript поможет вам.

Другой вариант - поместить текстуру поверх другого изображения с абсолютным позиционированием. Однако трудно понять, является ли это приемлемым вариантом без дополнительного контекста. Вот пример: http://jsfiddle.net/cPSFQ/1/.

Answer 3

Не существует чистого решения css для вашего вопроса, совместимого с кроссбраузерным интерфейсом.Я понимаю, что этот ответ не соответствует вашим первоначальным критериям, но я решил, что все равно предоставлю его, чтобы вы могли иметь его в качестве опции.

Использование псевдоэлементов (:before) было бы логичнымВыбор для CSS3, но, увы, они не работают с тегами img.

Вам придется что-то сделать, вместо этого поменять разметку или добавить немного JavaScript.Предполагая, что вы не можете редактировать разметку (иногда вы не можете контролировать исходные данные), но можете управлять javascript, вы можете сделать это с помощью чистого javascript, например:

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

}

1009 * jsfiddle , который делает то, что вы хотите (но с JavaScript).

Answer 4

Вы можете попробовать это.http://jsfiddle.net/Bs7nv/

В этом все, что я делаю, это отображение изображения и div, в котором мы можем использовать изображение текстуры в качестве фона и абсолютное позиционирование для отображения поверх реального изображения.