WordPress 透明 HTML 小部件背景答案

【问题标题】：WordPress transparent HTML widget backgroundWordPress 透明 HTML 小部件背景
【发布时间】：2018-09-14 13:46:45
【问题描述】：

拥有 wordpress BoldGrid 主题并设置自定义 JS 和 CSS，如下所示。我现在喜欢看到透明背景，但不是。

自定义 JS 和 CSS：

.boldgrid-css{ background: white; } (This is not my code line)  
.opci{background: rgba(0, 0, 0, 0); }

然后我在 HTML 小部件中使用 CSS，例如：

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
         text-align: left;
         color: green;
         font-family: Arial, Helvetica, sans-serif;
         }
      </style>
   </head>
   <body>
      <div class="opci">
         <h1>Work in progress...</h1>
         <p>Alpha released.</p>
         <p>april 4 2018.</p>
      </div>
   </body>
</html>

这不会使背景透明，背景是白色的。

我错过了什么？

看起来.boldgrid-css CSS（白色）以某种方式将我的小部件背景始终涂成白色

这是编辑器的屏幕截图。显示“正在进行中...”的框我想要透明背景，但它是白色的

【问题讨论】：

您提供的示例中带有boldgrid-css类的html标签在哪里？
登录Wordpress BoldGrid即可找到
我明白了，但是哪个标签包含该类？如果您认为问题出在 .boldgrid-css 类上，那么您可以编写自己的规则，例如：.boldgrid-css{ background: rgba(0, 0, 0, 0); } 或 .boldgrid-css{ background: rgba(0, 0, 0, 0) !important; }
我只使用.opci类，主题使用.boldgrid-css类。如果我删除它，我会收到错误消息。如果我按照您的建议进行更改，那么我网站中使用 .boldgrid-css 类的其他部分将会更改
抱歉，您的更新未提供更多信息，这可能会有所帮助。如果您远离 html/css，请提供页面的 url。如果不查看包含该部分所有相关 CSS 规则的完整标记，我无法提出其他建议

标签： html css wordpress widget transparent

【解决方案1】：

这里有两种获得透明背景的解决方案：

我们正在使用您的标签的id。 ID 不得在页面上重复（有时该规则会因编码错误而中断）。使用这条规则：
```
#custom_html-3{
  background: transparent;
  border: none;
}
```
如果没有帮助，您可以使用!important，这将覆盖所有其他规则，即使它们稍后加载（例外可能是其他规则，它们也在使用!important）：
```
#custom_html-3{
  background: transparent !important;
  border: none !important;
}
```

如果id在其他页面上重复，但你不想在其他页面上也有透明背景，那么我们可以更具体，比如：

.page-id-12 #custom_html-3{
  background: transparent !important;
  border: none;
}

或

.page-id-12 #custom_html-3{
  background: transparent;
  border: none;
}

注意：另一方面，我们可以使用background: rgba(0,0,0,0);。差异很好解释here。

附：你可以使用这个 html 标记：

  <style>
     body {
     text-align: left;
     color: green;
     font-family: Arial, Helvetica, sans-serif;
     }
  </style>
  <div class="opci">
     <h1>Work in progress...</h1>
     <p>Alpha released.</p>
     <p>april 4 2018.</p>
  </div>

您不需要在另一个 (<doctype>,<html>,<head>,<body>) 中呈现完整的 html。此外，您可以将样式规则添加到 Customize -> Additional CSS。

回答您的问题。即使没有设置你的div.opcibackground 规则，它也是透明的，它是inheritance。更多您可以找到here。

【讨论】：

谢谢，我必须阅读这个不太了解的内容。当我在自定义主题 CSS 部分中添加 nr:1 时，我已经有了.opci{background: rgba(0, 0, 0, 0); }，“框”是透明的，谢谢。我没有更改 HTML 中的 <div class="opci">（我的 Q 中的图片）奇怪它的工作必须了解更多..
仍然有一个行框可见吗？是否可以删除它？我知道这是一个新的 Q
已更新。你可以使用#custom_html-3{ background: transparent; border: none; }
很高兴能提供帮助