Question

我有以下HTML，我无法修改。我可以使用CSS文件。有没有办法获取href值/属性并将其用作CSS背景图像？

我需要类似的东西：

    background-image: url(href value);

这可能吗？ href值是搜索的结果，因此它并不总是相同。

<tr class="trdata1">
    <td class="file">
        <span class="nobr">
            <nobr>
                <a href="/C/.../.../image.jpg">
                    <img class="icon" src="/file.gif" alt="">$image.jpg
                </a>
            </nobr>
        </span>
    </td>
</tr>

Answer 1

不，没有办法用纯CSS做，你必须使用Javascript。例如。用jQuery：

$('.your-element').css(
  'background-image', 'url(' + $('.trdata1 > .file a').attr('href') + ')'
);

Answer 2

您可以获取该超链接的属性，并使用jquery将其应用于元素。

var imgHref = $(".nobr nobr a").attr("href");
$(".imageBg").css('background-image','url('+imgHref+')');

working example

注意：请确保班级名称是唯一的

Answer 3

使用纯CSS动态无法实现。

在纯CSS中，您只能静态地执行此操作：

your-selector {
    background-image: url("static-value");
}

使用`href`属性作为CSS background-image

3 个答案: