Question

我的目标是重新创建这种效果:(链接被移除以便为其他链接腾出空间，我还没有达到10级：/）

在＆＃34; Team＆＃34;部分：http://boulderfood.staging.wpengine.com/

使用CSS很容易，但我试图让它变得动态，以便如果客户将来更改照片，它会自动适应。

（我还没有调整过详细的造型，所以它现在看起来很棒）

我已成功将每个WP图像转换为以自身为背景的div。

现在我需要设置个人＆＃34; .ch-info-front＆＃34; div与他们的父母有相同的BG＆＃34; .ch-item＆＃34;格。

我可以让他们使用行中的最后一张图片，但不是每张图片都有自己的父级bg-image。我花了好几个小时尝试各种方法，最后决定我需要专家的帮助。到目前为止我在这里。

jQuery(document).ready(function($) {

$(".et_pb_team_member_image img").each(function(i, elem) {

    var img = $(elem);
    var img_turned_to_div = $("<div />").css('background-image' , 'url(' + img.attr("src") + ')' );
    var changeBG = $('.ch-info-front').css('background-image', 'url(' + img.attr("src") + ')' );

    img_turned_to_div.addClass("ch-item");
    img.replaceWith(img_turned_to_div);

});
$('.ch-item').prepend( $('.ch-info-wrap') );

}）;

/////更新/////

越来越近了。非常感谢用户Digital_Coffee，虽然你的代码没有达到我需要的结果，我修改了一点，我已经得到它来重现每个的CSS背景图像 - 但它把它放在错误的div上

/////更新2 /////

^抓一点 - 我现在正在使用它：

$(".et_pb_team_member_image img").each(function(i, elem) {

    var img = $(elem);
    var img_turned_to_div = $("<div />").css('background-image' , 'url(' + img.attr("src") + ')' );

    img_turned_to_div.addClass("ch-item");
    img.replaceWith(img_turned_to_div);

});

$('.ch-item').prepend( $('.ch-info-wrap') );

$(".ch-info-front").each(function() {
    $(this).css( 'background-image', $(this).closest('.ch-item').css('background-image') );
});

我想我昨晚太累了把它放在一起，哈哈。您如何看待这个脚本，它会更有效吗？我是JS的新手。

Answer 1

这是我想出的。

我了解您必须将<img>变为<div>。我注意到，当我查看您项目的链接时，<div>似乎没有保留src属性。在将src更改为data-whatever之前，您可能必须将var属性转换为<img>属性或将其保存在<div>中。

<强> HTML

<div class="ch-item">
    <div class="ch-info-front" data-imgPath=" What ever your path is to your img from your HTML "></div>
</div>

<强>的Javascript

$(".ch-item").each(function() {
var infoFont = $(".ch-info-front")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
    return $(this).children(infoFont).css({ "background": "url(" + $imgLink + ") no-repeat"});
});

动态设置多个div背景图像与第三父div相同

1 个答案: