javascript - 图像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