Question

我正在研究一个项目，当我得到一个想法时，我需要将背景图像告诉中心。如果我使用了一个选择器，发现是否存在style="background-image: url()"并添加了必要的代码以使图像居中，该怎么办？基于样式属性添加CSS的想法看起来非常糟糕，但是当我想到它时，可能会在重置文件中使用它。由于选择器不是特定的，因此应该很容易被覆盖，并且允许更改style="background-image: url()"的所有div的默认背景样式。

我不确定这是多么实用，但是这件事有没有做过？我是否有任何问题需要监督，这可能会导致？也许这是不现实的，但我认为开始讨论很有趣。请参阅下面的示例代码...

＆＃13;

div{
  display: block;
  height: 100px;
  width: 100px;
}

[style*=background-image]{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

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

＆＃13;

Answer 1

我认为这取决于你的项目。您的所有<div>仅用于此目的吗？你的所有背景图像都会居中吗？如果是这样，那么也许没关系，但如果您认为您将覆盖项目中的其他元素，那么在您开发应用程序时可能会出现问题。

你为什么不尝试这样的事情：

<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;
}

或如果您在一个部分中有多个：

<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;
}

另请注意，您无需将display:block应用于div。 div已经是一个块元素。

Answer 2

像<div class="myclass">一样给div一个类，然后应用这样的样式：

.myclass [style*=background-image]

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

2 个答案: