如何使透明父div上的子元素不透明：解决WordPress滑块Read More按钮透明度问题

不生效的核心原因 #

• 你写的CSS选择器优先级低于插件自带的默认样式，规则被覆盖
• 按钮的父级半透明遮罩层（.wpsisac-bg-overlay）本身设置了opacity属性，子元素的透明度是基于父元素的透明度叠加计算的，单独给子元素设opacity:1也无法突破父元素的透明度上限
• 浏览器或站点缓存了旧的CSS样式，修改后没有加载最新的规则

具体实现步骤 #

1. 进入WordPress后台，点击「外观」→「自定义」→「额外CSS」，将以下代码粘贴到输入框中：

/* 方案1：仅解决按钮本身优先级不够的问题 */
#row0 .wpsisac-slider-readmore {
  opacity: 1 !important;
  /* 如果按钮背景本身是半透明的，同时修改背景的透明度，颜色可以替换为你实际的按钮背景色 */
  background-color: rgba(22, 22, 22, 1) !important;
}

/* 方案2：如果是父层透明度导致的，添加以下代码替换方案1即可 */
/* 先将父遮罩层的opacity改为1，改用rgba实现背景半透明，不影响子元素 */
#row0 .wpsisac-bg-overlay {
  opacity: 1 !important;
  /* 这里rgba最后一位是父遮罩的背景透明度，按需调整数值0~1即可 */
  background-color: rgba(255, 255, 255, 0.8) !important;
}
#row0 .wpsisac-slider-readmore {
  opacity: 1 !important;
  background-color: rgba(22, 22, 22, 1) !important;
}

2. 保存自定义设置后，清空站点缓存、浏览器缓存，刷新页面即可生效。
3. 若仍有问题可以按F12打开浏览器开发者工具，选中Read More按钮，在「计算样式」面板查看实际生效的opacity值，定位冲突的样式规则。

内容的提问来源于stack exchange，提问作者CodeForGood