Question

我正在尝试从图像中复制src并将其添加到其直接的父背景图像中。

例如，这是我的html

<div class="win__image">
    <div class="field-item even">
        <img data-original="https://davecross.files.wordpress.com/2011/01/pale-blue-dot.jpg" class="img-responsive" src="https://davecross.files.wordpress.com/2011/01/pale-blue-dot.jpg"
            width="960" height="620" />
    </div>
</div>

并且，我正在尝试做类似下面的事情

var $winImage = $('.win__image');

if ($winImage.length > 0) {
    $winImage.find('img').css('opacity', '0');
    $('.win__image .field-item').css({
        'background-size': 'cover',
        'background-position': 'center center',
        'background-repeat': 'no-repeat',
        'width': '960px',
        'height': '620px',
        'background-image': 'url("' + $winImage.find('img').src('data-original') + '")'
    });
}

示例链接： http://codepen.io/hellouniverse/pen/wgMEMp

现在，首先不会复制图像。它说＆＃34; undefined＆＃34;在图像背景url.Also，如何获得它的直接父母？

Answer 1

你获得winImageSrc的方式有一个小错误：

var $winImage = $('.win__image');
var $winImageSrc = $winImage.find('img').data('original');
                                         ^^^^^^^^^^^^^^^^

if ($winImage.length > 0) {
    $winImage.find('img').css('opacity', '0');
    $('.win__image .field-item').css({
        'background-size': 'cover',
        'background-position': 'center center',
        'background-repeat': 'no-repeat',
        'width': '960px',
        'height': '620px',
        'background-image': 'url("' + $winImageSrc + '")'
    });
}

修改：在第一个解决方案中，我更换了

$('.win__image .field-item').css({

带

$(winImage).parent().css({

然后我意识到这不是你想要做的。无论如何，请考虑使用parent（）来获取元素的直接父级。

Answer 2

您的代码中存在一些syntex问题，您可以使用以下代码：

var $winImage = $('.win__image');

if ($winImage.length > 0) {
    $winImage.find('img').css('opacity', '0');
    $('.win__image .field-item').css({
        'background-size': 'cover',
        'background-position': 'center center',
        'background-repeat': 'no-repeat',
        'width': '960px',
        'height': '620px',
        'background-image': 'url("' + $winImage.find('img').attr('data-original') + '")'
});

}

Answer 3

更改

\n

对此：

$winImage.find('img').src('data-original')

Answer 4

只更换代码正在运行的行...

$winImage.find('img').attr('data-original');

如何复制图像并将其添加为父项背景图像？

4 个答案: