图像jquery前面的颜色

Question

我不想使用jquery为图像元素添加颜色阴影。请忽略下面的颜色，只是寻找效果。

这是我创建图片的方式：

$(document.createElement
('img'))
.addClass
('question-image')
.attr
('id', 'question-image')
.attr
('src', quiz[currentquestion]['image'])
.attr
('alt', htmlEncode(quiz[currentquestion]['question']))
.insertAfter
('#question');

这是我认为会给我一个前景色

$('div').css('background-color:', 'red').appendTo('#question-image');

Answer 1

这是一种在CSS / HTML中执行此操作的方法。您可以轻松地将其转换为Jquery，因为除非您发布显示某些上下文的JSFiddle，否则我很难以您可以轻松使用的方式执行此操作。

HTML

<div>
    <img src="imagesource" />
    <div></div>
</div>

CSS

img {
    width: 100px;
    height: 150px;
}
div {
    position: relative;
}
div > div {
    width: 100px;
    height: 150px;
    background-color: red;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
}

这样做是将子div设置为与图像大小相同的红色叠加，并将其直接放在图像上。

JSFiddle