为div添加背景

Question

我想为div添加背景。

使用此CSS按预期工作：

background: url('../images/badge2.png') ;

。 。 。但是当我使用这个CSS而不是上面的CSS时，它不起作用。

$('#offerDiv').css("background", "url('../images/badge2.png')");

关于可能出错的任何建议？

Answer 1

这是因为CSS中的url()应该与它的使用位置相关。让我们考虑一下这个案例。

- index.html
- css/
  - style.css
- img
  - badge.png

在您需要设置的style.css中：

background: url("../img/badge.png");

然而，如果您使用JavaScript在元素上设置它，那么您将在HTML文件上设置它，其中URL会相对于解析CSS的HTML文件进行更改。所以从HTML文件中，它是兄弟的（img）孩子（badge.png）：

background: url("img/badge.png");

但是在CSS文件中，它是父文件（../）兄弟（img）子文件（badge.png）。这个很清楚吗？

Answer 2

另一种方法是避免应用纯CSS规则，只处理JavaScript代码中的类。您可以创建一个CSS类，例如：

.styledDiv {
  background: url('../images/badge2.png');
}

然后使用jQuery addClass函数将此CSS类应用于元素：

$('#offerDiv').addClass("styledDiv");