WooCommerce在css中添加背景被破坏

z5btuh9x 于 2023-03-14 发布在其他

关注(0)|答案(3)|浏览(114)

我正在尝试为某些类别/页面设置背景。我使用下面的css代码。它实际上工作。但是背景显示在所有页面上。我希望它只显示在某些页面上。
我该怎么解决这个问题？

#content {
    background: url(IMAGE URL) repeat center bottom fixed !important;
    background-size: cover !important
}

很遗憾，我在Internet上找不到任何内容。什么可以解决我的问题？

3条答案

在浏览器的HTML视图中查看<body>标签的类。WordPress为每个帖子添加了一个唯一的类，称为postid-xxx，例如postid-231。
因此，如果您希望CSS仅应用于ID为5和150的页面/帖子，请编写

.postid-5 #content, .postid-150 #content{
    background: url(IMAGE URL) repeat center bottom fixed !important;background-size: cover !important
}

在https://www.hostinger.com/tutorials/wordpress-post-id上可以找到其他一些不用查看HTML源代码就可以找到post ID的方法

您的css选择器当前匹配ID为“content”的所有HTML元素。如果您将此ID用于多个元素（如果您使用javascript通过ID访问这些元素，则可能导致问题），则样式将应用于所有这些元素。为了解决此问题，请改用类，并仅将该类添加到您希望应用样式的元素。
样品：

.class-to-modify {
  color: red;
}

<div id="something"class="class-to-modify">My style was modified</div>
<div id="something else">Mine was not</div>

使用body类可能是一个解决方案。除非有插件或主题覆盖它。请参阅这里的参考：
WordPress body classes
例如，您想在帖子页面上添加背景，您可以将CSS更改为：

.single #content {
background: 
url(IMAGE URL) repeat center bottom fixed!important;
background-size: cover !important
}

或特定岗位

.postid-{$your_postid} #content {
background: 
url(IMAGE URL) repeat center bottom fixed!important;
background-size: cover !important
}