英文:
WooCommerce add background in css is broken
问题
我正在尝试为特定类别/页面设置背景。我使用以下CSS代码。它实际上起作用。但背景显示在所有页面上。我希望它只显示在某些页面上。
我该如何解决这个问题？
#content {
background: url(图片URL) repeat center bottom fixed !important;
background-size: cover !important
}
不幸的是，我在互联网上找不到任何信息。什么可以解决我的问题？
英文:
I'm trying to set a background for certain categories/pages. I use the following css code. It actually works. But the background is displayed on all pages. I want it to be displayed only on certain pages.
How do I get this solved?
#content {
background: url(IMAGE URL) repeat center bottom fixed !important;
background-size: cover !important
}
Unfortunately, I can't find anything on the Internet. What could fix my problem?
答案1
得分: 0
Your css selector currently matches all HTML elements with the id "content". If you use this id for multiple elements (which could lead to problems if you use javascript to access these elements by id), then the styles will apply to all those elements. In order to fix this, use a class instead and only add that class to elements you want the style to apply to.
Sample:
.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>
英文:
Your css selector currently matches all HTML elements with the id "content". If you use this id for multiple elements (which could lead to problems if you use javascript to access these elements by id), then the styles will apply to all those elements. In order to fix this, use a class instead and only add that class to elements you want the style to apply to.
Sample:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.class-to-modify {
color: red;
}
<!-- language: lang-html -->
<div id="something"class="class-to-modify">My style was modified</div>
<div id="something else">Mine was not</div>
<!-- end snippet -->
答案2
得分: 0
看一下浏览器 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
}
在不查看 HTML 源代码的情况下找到文章 ID 的其他方法可以在 https://www.hostinger.com/tutorials/wordpress-post-id 上找到。
英文:
Look at the classes of the <body> tag in HTML view of your browser. WordPress adds a unique class for every post, called postid-xxx, e.g.postid-231.
So if you want your CSS only applied for pages/posts with e.g. ID 5 and 150, write
.postid-5 #content, .postid-150 #content{
background: url(IMAGE URL) repeat center bottom fixed !important;background-size: cover !important
}
Some other ways to find the post ID without looking at the HTML source can be found on https://www.hostinger.com/tutorials/wordpress-post-id
答案3
得分: 0
使用 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
}
英文:
Using body classes can be a solution. Unless any plugin or theme override it. Please see the reference here:
For examples, you want to add the background on the post pages, you can change your CSS to:
.single #content {
background:
url(IMAGE URL) repeat center bottom fixed!important;
background-size: cover !important
}
or for specific post
.postid-{$your_postid} #content {
background:
url(IMAGE URL) repeat center bottom fixed!important;
background-size: cover !important
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论