html - div 的数据背景属性和图像未显示

Question

我想像这样为 div 的背景放一张图片，但它没有显示，不知道为什么，如果它不能以这种方式工作？

<div data-background="image.jpg></div>

如果我添加这种样式，它会起作用，但我想避免这种情况，只想通过数据背景实现。

<div data-background="image.jpg" style="background-image: url('image.jpg');"></div>

编辑:我想使用该属性的原因是因为我拥有的 CSS:

.landing [data-background] {
    width: 50%;
    height: 50%;
    float: left;
    border: 2px solid white;
}

.landing [data-background]:nth-child(1) {
    border-right-width: 1px;
    border-bottom-width: 1px;
}

.landing [data-background]:nth-child(2) {
    border-left-width: 1px;
    border-bottom-width: 1px;
}

.landing [data-background]:nth-child(3) {
    border-top-width: 1px;
    border-right-width: 1px;
}

.landing [data-background]:nth-child(4) {
    border-top-width: 1px;
    border-left-width: 1px;
}

它来自模板，我正在尝试创建介绍着陆页幻灯片 2x2 更改的照片网格...

这就是为什么我不想拥有样式，因为需要为每个 div 创建 id，或者将这些行保留在 html 中...尽量避免两者

Answer 1

改成这样

html,
body {
  margin: 0;
  height: 100%;
}
.landing {
  height: 100%;
}
.landing div {
  width: 50%;
  height: 50%;
  float: left;
  border: 2px solid red;
  box-sizing: border-box;
}
.landing div:nth-child(1) {
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.landing div:nth-child(2) {
  border-left-width: 1px;
  border-bottom-width: 1px;
}
.landing div:nth-child(3) {
  border-top-width: 1px;
  border-right-width: 1px;
}
.landing div:nth-child(4) {
  border-top-width: 1px;
  border-left-width: 1px;
}

<div class="landing">
  <div style="background-image: url('http://placehold.it/100');"></div>
  <div style="background-image: url('http://placehold.it/100');"></div>
  <div style="background-image: url('http://placehold.it/100');"></div>
  <div style="background-image: url('http://placehold.it/100');"></div>
</div>

边注

您仍然可以在 CSS 中使用该属性，但建议按照我的第一个示例进行操作

html,
body {
  margin: 0;
  height: 100%;
}
.landing {
  height: 100%;
}
.landing [data-background] {
  width: 50%;
  height: 50%;
  float: left;
  border: 2px solid red;
  box-sizing: border-box;
}

.landing [data-background]:nth-child(1) {
    border-right-width: 1px;
    border-bottom-width: 1px;
}

.landing [data-background]:nth-child(2) {
    border-left-width: 1px;
    border-bottom-width: 1px;
}

.landing [data-background]:nth-child(3) {
    border-top-width: 1px;
    border-right-width: 1px;
}

.landing [data-background]:nth-child(4) {
    border-top-width: 1px;
    border-left-width: 1px;
}

<div class="landing">
  <div data-background style="background-image: url('http://placehold.it/100');"></div>
  <div data-background style="background-image: url('http://placehold.it/100');"></div>
  <div data-background style="background-image: url('http://placehold.it/100');"></div>
  <div data-background style="background-image: url('http://placehold.it/100');"></div>
</div>