javascript - 将图像指定为 css 背景图像

Question

我正在开发一个响应式 slider ，这并不容易。基本上它必须在 320px 到 1920px 之间工作，并具有固定的高度。

所以这让我很头疼，我有一个简单的解决方法:不使用 a > 图像，我将图像 url 指定为 a 的背景图像，然后将图像不透明度设置为 0。所以，我会能够使用 cover+cen​​ter 背景属性，我的 slider 将是完美的。

但是我在这样做时遇到了问题，因为我不确定该怎么做，我昨天花了一些时间但无法将图像指定为背景。

这是标记的样子(我删除了不必要的 block ，只保留最重要的部分)

<div class="slide-image"> 
    <a href="xyz.com">
        <img src="image.com/img.jpg">
    </a>
</div>
<div class="slide-image"> 
    <a href="zxy.com">
        <img src="image.com/img2.jpg">
    </a>
</div>

等..

我试过那个不起作用的代码，变量得到一个值但没有分配任何值:

$(function() {
    if ($('.slider').length) {
        $('.slider').slick({});

        $('.slide-image').each(function() {
            var img = $('img', this).attr('src');
            $('a', this).css('background-image', 'url(' + img + ')url');
        };
    }
});

Answer 1

您正在尝试读取“src”属性，但您已经在 HTML 中设置了“url”。改变你的 JS:

var img = $('img', this).attr('url');

您还指定了错误的样式。应该是:

$('a', this).css('background-image', 'url(' + img + ')');