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

Question

我正在使用 Wordpress 和 WPbakery。我已经设置了一个全宽、全高的背景。但目前背景位置设置为以“！重要”为中心，正如我在开发人员工具中看到的那样。

我想将其设置为 'top'。我在 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

您需要查看生成代码的文件。例如 -

在您知道哪个文件负责代码后，您就可以转到网站目录并执行相关文件。

Answer 2

不确定自定义样式和主题的默认 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/themes 样式中获取的完全相同的选择器来覆盖某些内容，那么这只是一个顺序问题。 WP 样式是最后嵌入的吗？然后他们赢了，否则你会赢。

解决这个问题的一个简单方法是增加选择器的特异性。在作为 html 元素后代的附加“条件”上选择此 class 的元素是一种方法。或者重复 class 名称，使 .foobar 变为 .foobar.foobar ......以及许多其他可能的方式。

Answer 3

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

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

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

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

set background position to top in wordpress

css

wpbakery