在不同页面上使用Wordpress，我如何在内部内容上具有不同的不透明度级别？

如何解决在不同页面上使用Wordpress，我如何在内部内容上具有不同的不透明度级别？

我有一个高尔夫网站，我正在研究使用高尔夫球孔背景的位置。为此，您可以在主页上看到图像，我将内部文本内容的CSS的不透明度降低到70％。我不希望它在其他页面上看起来像这样，因此尝试找出两种方法之一：1.仅在主页上显示高尔夫球孔背景图像，或2.在所有其他页面上具有不透明度级别除首页外，其他页面均为100％。我进行了大量搜索，但找不到解决方案。 location of site

解决方法

根据我在您提供的链接上看到的内容，需要解决两个重要问题才能使其正常运行：

1：不透明度管理

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

2：CSS精度

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

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

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

页面ID并不是最好的选择器，因为如果您创建新页面，页面ID可能会更改，并且将来您必须对每个ID进行硬编码，所以我鼓励您也考虑使用the comments on another question you asked about this的方法。

编辑：有关向页面添加自定义类的更多链接

实际上很容易。您正在查看动态内容显示。

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

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

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

由于您希望style.css类的样式在索引/主页上有所不同，因此我们将打开.site-inner文件。

在header.php文件中的header.php标记之间，您可以添加以下内容：

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; ?>类的不透明度设置为.7，否则ELSE设置.site-inner的不透明度等级为1。“

还有一件事：不透明样式会影响父容器，并且所有子级都会影响父容器。对于您来说，内容（文本和图像）也会受到不透明度的影响。

我建议您使用rgba颜色代码。通过将rgba颜色代码与.site-inner配合使用，您可以仅控制容器的背景颜色不透明度，而不能控制整个内容（孩子和父母）。例如，使用（background-color，您将获得不透明度为50％的白色背景，而不会影响内容。

使用rgba颜色代码：

background-color:rgba(255,.5)

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

问候，请告诉我这是否对您有帮助。