在不同页面上使用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规则,新页面将不受其影响。

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

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...