在wordpress中将背景位置设置为顶部

Question

我正在使用Wordpress和WPbakery。我设置了一个全宽，全高度的背景。但目前的背景位置设置为‘！重要’，正如我在开发工具中所看到的那样。

我想把它设为“顶上”。我用chrome编辑了开发工具，并达到了预期的效果。然而，我不知道如何使这些变化永久化。我尝试过将我在开发人员工具中看到的复制粘贴到自定义css字段中，并将其编辑为“top”，但是它不会覆盖主题。我该怎么做？

这是开发人员工具中当前的代码：

.vc_custom_1551104319445 {
background-image: url(https://unlicensedshrink.com/wp-content/uploads/2019/02/ulweb.jpg?id=9) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;

}

Answer 1

不确定主题的自定义样式和默认CSS按照什么顺序输出…试着增加你的选择器的特异性，f.e。比如html .vc_custom_1551104319445或.vc_custom_1551104319445.vc_custom_1551104319445

当多个CSS规则应用于一个元素并试图为相同属性指定值时，这就变成了专用性的问题，哪一个“获胜”。

以下是有关该主题的几个资源：

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://specificity.keegan.st/

所以，如果你试图用与你从WP/主题风格中得到的完全相同的选择器来覆盖某件东西，这就变成了一个简单的顺序问题。WP样式是最后嵌入的吗？那他们就赢了否则你会赢的。

一个简单的方法，就是增加你的选择器的特异性。在附加的“条件”上选择这个类的元素，这些元素是html元素的后代，这是一种方法。或者重复类名，使.foobar变成.foobar.foobar…还有很多其他可能的方法。

Answer 2

您需要查看哪个文件正在生成代码。例如-

​

在您知道哪个文件负责代码之后，您将转到站点目录并实现该文件。

Answer 3

我不建议使用vc_号选择器。最好在行或元素本身上添加自定义选择器，然后应用以下CSS。

.has-bgimg-right.vc_row-has-fill{
   background-position:center right !important;
}

如果使用vc_号码选择器，最终会发生什么情况:如果您或您的客户端去更新该字段，则vc号将更改，您将摇头。因此，创建一个自定义选择器类，并使用vc_row有填充，这将永远不会改变。