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>

Answer 2

为什么不使用div{ background-image: url("image.jpg"); } 在你的css文件中？

如上所述......数据属性不适合样式用途。

div的数据背景属性和图像没有显示出来

2 个答案: