通过 CSS 更改图像答案

【问题标题】：Changing an image through CSS通过 CSS 更改图像
【发布时间】：2019-04-27 01:13:17
【问题描述】：

我想替换我的一个页面上的主要“英雄”背景。由于我使用的是 Wordpress，因此我不得不使用自定义 CSS（我无法编辑 HTML）。

我尝试使用类选择器定位当前照片所在的 div，如下所示：

.header .custom-mobile-image {

    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg);


}

这是我试图定位的 HTML 代码：

<div class="header custom-mobile-image" style="background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/education-books.jpg"); background-color: rgb(106, 115, 218); padding-top: 74.5938px;">

页面本身的链接：http://thenovelcolumn.com/the-10x-rule

目标照片是页面上的第一张，中间有三本打开的书。

我希望我的 CSS 代码将这张照片更改为链接指定的任何内容，但照片保持不变。

【问题讨论】：

你应该在你的 style 属性中转义双引号或者用单引号替换它们

标签： html css image css-selectors

【解决方案1】：

您的选择器应该是.header.custom-mobile-image（即两个类之间没有空格 - 它们都分配给同一个元素，空格表示父/子关系）

您应该在该规则中添加!important 以覆盖更具体的style 属性。

【讨论】：

【解决方案2】：

这是因为“style”属性中的样式比您可能添加到类甚至 id 的任何样式具有更大的特异性：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

所以在这种情况下，唯一的方法就是使用 !important:

.header.custom-mobile-image {
    background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg) !important;
  }

【讨论】：

【解决方案3】：

我们开始：

.header.custom-mobile-image {

background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X- 
Rule-Image-2-e1555476700855.jpg") !important;


}

【讨论】：

【解决方案4】：

编写内联 css (style="some:css;") 不是最好的主意。它总是会忽略 .css 文件中的样式。正如有人已经提到的那样，这是关于特异性的。最弱的是类型选择器（html标签和伪元素），然后是类，然后是id

如果您有内联 css，它将在 .css 文件上应用样式。唯一比内联 CSS 更强大的是使用 !important

【讨论】：