如何更改 element.style 以显示响应式照片？

Question

我有一张 header 图片，我想对其进行相应更改。但是在 CSS 中显示为 element.style 并覆盖我添加的任何 CSS。我在这个论坛上阅读了一些答案，但是我仍然不明白我需要做什么来覆盖这个设置。我认为我的主题可以解决这个问题。我有这样的代码，我想更改 background-image:

element.style {

      background-image: url('https://imagelink.com');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(0, 0, 0, 0);
      min-height: 499px;

}

编辑：我的主要目标是 background-image 响应 smaller/bigger 屏幕，因为我的页面构建器 (wpbakery) 没有这个选项

Answer 1

CSS 遵守一些渲染样式的规则，您需要遵循这些规则才能管理您的样式。通常，CSS 将呈现带有 !important 的第一条规则，然后是更具体的选择器，然后是最后处理的（如果您的特异性相同且没有 !important，将呈现最后一条规则）。

一个好的做法是在你想要覆盖某些东西时增加特异性，你可以阅读更多关于它的信息here。

Answer 2

优先级规则如下：

ID 是最重要的 (#unique-element)。
类下一个 (.multiple-elements).
名字来了 (div)。

元素越多，优先级越高。示例：div span.highlight 的优先级高于 h1.main-title（2 个元素 + 1 class VS 1 个元素 + 1 class）。

在相同优先级的情况下，它是最新定义的（在你的文件中最低行的那个）很重要，因为 CSS 重写了以前定义的规则。

例外情况：

内联代码 (<div style="...">) 覆盖所有内容。
添加 !important 覆盖所有内容，甚至是内联代码，但被认为是不好的做法，因为它高于 style=""，它也不受您可以从 JavaScript 进行的任何更改的影响。

Examples with a bunch of fish

如何更改 element.style 以显示响应式照片？

How to change element.style to display responsive photos?

css

element