WordPress 透明 HTML 小部件背景

Question

拥有 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（白色）以某种方式占主导地位，总是将我的 Widget 背景涂成白色

这是编辑器的屏幕截图。方框说 "Work in progress..." 我想要透明背景，但它是白色的

Answer 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.

P.S。您可以使用此 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.opci background 规则，它也是透明的，它是 inheritance。更多你可以找到 here.

WordPress 透明 HTML 小部件背景

WordPress transparent HTML widget background

html

css

wordpress

widget

transparent