基于样式属性应用CSS是一种不好的做法吗

我正在做一个项目，当我有了一个想法时，我需要把背景图像告诉中心。如果我使用了一个选择器，找到是否存在

style=“background image:url（）”

，并添加了必要的代码以使图像居中，该怎么办。基于style属性添加CSS的想法似乎是非常糟糕的做法，但当我进一步考虑它时，也许它可以用于重置文件。由于选择器没有那么具体，它应该很容易被覆盖，并且它允许更改所有具有

style=“background image:url（）”

的div的默认背景样式

我不确定这有多实际，但这是曾经做过的事情吗？是否有任何问题我正在监督，这可能会导致？也许这不现实，但我认为这足够有趣，可以开始讨论。请参阅下面的示例代码

div{
显示：块；
高度：100px；
宽度：100px；
}
[样式*=背景图像]{
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}

---

像

一样为div指定一个类，然后应用如下样式：

.myclass [style*=background-image]

<div class="center-image" style="background-image: url('https://i.stack.imgur.com/RhYGF.png')"></div>

.center-image {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

---

我想这取决于你的项目。您所有的

是否仅用于此目的？你所有的背景图像都要居中吗？如果是这样的话，那么可能没问题，但是如果您认为您将为项目中的其他元素覆盖它们，那么在开发应用程序的过程中可能会出现问题

你为什么不试试这样的东西：

.myclass [style*=background-image]

<div class="center-image" style="background-image: url('https://i.stack.imgur.com/RhYGF.png')"></div>

.center-image {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.中心图像{
高度：100px；
宽度：100px；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}

或者，如果一个部分中有多个：

<div class="center-image-wrapper">
   <div style="background-image: url(path-to-img1)"></div>
   <div style="background-image: url(path-to-img2)"></div>
   <div style="background-image: url(path-to-img3)"></div>
</div>

.center-image-wrapper > div {
      height: 100px;
      width: 100px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
}

.中心图像包装器>div{
高度：100px；
宽度：100px；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}

---

另请注意，您不需要对div应用

display:block

。div已经是块元素了。

当然这很危险！！如果在CSS文件的规则中指定了背景图像，则此操作将不起作用。这可能也没有必要。您可以为

背景大小
等指定全局默认值，如果没有背景图像，它们将毫无效果。是的，这就是我认为它不实用的原因之一。不过仍然很有趣。是的，事实上我就是这样做的，但我很好奇这个其他方法有多有用，因为我以前从未见过这样做。