javascript - 如何在 Javascript 中调用背景图像 URL

Question

我在 Squarespace 中有一个部分，我通过自定义 CSS 设置了背景图像:

background-image:url('https://images.squarespace-cdn.com/content/v1/5f187409db749f75b4b70872/1595438345426-RJBC7YPJSV4XRBU4WSDM/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg');
background-repeat:no-repeat;

我正在尝试申请 this hover distortion effect在上述背景图片上，需要调用/定位它，但我不知道如何，因为我不是开发人员 - 我将如何去做？这是我到目前为止的 Javascript 代码:

var myAnimation = new hoverEffect({
    parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background'),
    image1: ???,
    image2: ???,
    displacementImage: 'https://homesteadmodern.com/assets/displacement.png'
});

更新
我设法用 parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].page-section > div') 更具体地定位了 div。 ，并设法在 image1 和 image2 中使用实际 URL，它们按预期显示为背景图像。现在唯一的问题是悬停不再起作用，即使当我取出 > div 时它仍然起作用。 (但这会导致图像显示在错误的位置)!有什么帮助吗？

Answer 1

您可以使用 getComputedStyle() function 来做到这一点。 .

var parent = document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background');
var bgImage = getComputedStyle(parent).getPropertyValue('background-image');

bgImage的值将是这样的:

url("https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg")

这是您放入 CSS 的确切值。如果要获取URL，可以添加replace()函数，正如 this answer to a similar question 所建议的:

var bgImage = getComputedStyle(parent)
        .getPropertyValue('background-image')
        .slice(4, -1).replace(/"/g, "");

bgImage的值现在将是:

https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg