Question

我正在使用响应式滑块，这并不容易。基本上它必须工作在320px到1920px之间，具有固定的高度。

所以它让我头疼，我有一个简单的解决方法：而不是使用a＆gt;图像，我将图像url指定为a的背景图像，然后将图像不透明度设置为0.因此，我将能够使用封面+中心背景属性，我的滑块将是完美的。

但我这样做有问题，因为我不确定该怎么做，我昨天花了一些时间，但不能把图像分配为背景。

以下是标记的样子（我删除了不必要的块，只保留最重要的块）

<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 + ')');

Answer 2

请注意，此行中有错误：

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

一定是

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

<img>标记不好，

 <img url=""> BAD
 <img src=""> GOOD

将图像指定为css背景图像

2 个答案: