我如何在不同页面上使用 Wordpress 对内部内容设置不同的不透明度级别？

Question

我有一个正在使用高尔夫球洞背景的高尔夫网站。为了让您可以在主页上看到图像，我在 CSS 中将内部文本内容的不透明度级别降低到 70%。我不希望它在其他页面上看起来像那样，所以试图弄清楚如何通过以下两种方式之一执行此操作：1.主页上只有高尔夫球洞背景图像或 2.所有其他页面都有不透明度级别主页以外的页面为 100%。我做了一堆搜索，找不到解决方案。 location of site

Answer 1

根据我在您提供的 link 中看到的内容，需要解决两个要点才能使其正常工作：

1: 不透明度管理

我认为您不应该直接在包含子元素的元素上使用 opacity，因为不透明度也会影响子元素。在这里，您的文本也有 0.7 的不透明度，这可能不容易阅读，而不是预期的设计。对于这种情况，我鼓励您使用它为 .inner-site 背景设置不透明的颜色。 background: rgba(255, 255, 255, 0.7); rgba 使用允许透明的 Red-green-blue-alpha 模型定义颜色。 255, 255, 255 是白色的 rgb 代码，0.7 是你想要的不透明度。

2: CSS 精度

您在 css 中定位 .site-inner，它出现在您的每个页面上。因此，它在所有页面上都具有相同的样式。如果您想正确使用 CSS，您在定位元素时应该尽可能精确，以使您的样式不重叠区域。

Wordpress 为您可以使用的每个页面的正文提供类，以便专门针对您的第一页和第二页。在这里，您可以使用类提供的页面 ID 来定位

.page-id-16 .site-inner,
.page-id-8 .site-inner {
 background: rgba(255, 255, 255, 0.7);
}

页面 id 不是最好的选择器，因为如果您创建新页面它们会发生变化，并且您将来必须对每个 id 进行硬编码，所以我鼓励您也想办法 give your wordpress page's body a class。

编辑：更多 link 关于向您的页面添加自定义类的信息

Answer 2

其实很简单。您正在查看动态内容显示。

您可以通过多种方式实现这一目标，让我们来看看其中的一种：

看看您的网站，我发现您在 .site-inner class 中添加了 opacity:.7; 样式。由于在所有页面上都加载了相同的 style.css 文件，您无法从此处实现此目的，让我们从 style.css 中删除 opacity:.7;。

使用PHP实现条件显示。遗憾的是我们不能在 CSS 文件中使用 PHP...但是我们可以在 PHP 文件中使用 CSS！

由于您希望 .site-inner class 的样式在 index/home 页面上有所不同，我们将打开 header.php 文件。

在 header.php 文件中，in-between head 标签中，您可以添加以下内容：

<?php if ( is_home() || is_front_page() ): ?>
<style media="screen">
.site-inner{opacity:.7!important;}
</style>

<?php else: ?>
<style media="screen">
.site-inner{opacity:1!important;}
</style>

<?php endif; ?>

就是这样！

我们说得很漂亮：“如果页面模板是首页或首页，则将 .site-inner class 的不透明度设置为 .7，否则将.site-inner class 的不透明度为 1。"

还有一件事：不透明样式影响父容器，所有子容器形成受影响的父容器。在您的情况下，内容（文本和图像）也会受到不透明度的影响。

我建议您使用 rgba 颜色代码。通过将 rgba 颜色代码与 background-color 一起使用，您可以仅控制容器的背景颜色不透明度，而不是整个内容（子项和父项）。例如，通过使用 (background-color:rgba(255,255,255,.5))，您将获得 50% 不透明度的白色背景，而不会影响内容。

使用 rgba 色码：

<?php if ( is_home() || is_front_page() ): ?>
<style media="screen">
.site-inner{background-color:rgba(255,255,255,.7)!important;}
</style>

<?php else: ?>
<style media="screen">
.site-inner{background-color:rgba(255,255,255,1)!important;}
</style>

<?php endif; ?>

编辑： 作为对 @ArnaudV 的回应，我不建议使用 css 规则定位特定页面，如果您添加或删除受特定目标 css 规则影响的页面，新页面将不会受其影响。

如果这对您有帮助，请随时告诉我，问候。

我如何在不同页面上使用 Wordpress 对内部内容设置不同的不透明度级别？

How would I have different Opacity levels on inner content using Wordpress on different pages?

css

wordpress

opacity