代码之家 › 专栏 › 技术社区 › Hello Universe

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

css html jquery

Hello Universe · 技术社区 · 8 年前

我试图从图像中复制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

首先,图像不会被复制。它在图像背景url中表示“未定义”。还有,如何找到它的直系父母?

4 回复 | 直到 8 年前

MazzCris 8 年前

获取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()来获取元素的直接父级。

Super User 8 年前

您的代码中存在一些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') + '")'
});

}

Z-Bone 8 年前

改变

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

为此:

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

Pravin Durugkar 8 年前

只需替换代码正在工作的行。。。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前