Question

拥有wordpress BoldGrid主题并设置Custom JS＆amp; CSS如下。我现在喜欢看透明的背景，但事实并非如此。

Custom JS＆amp; 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背景画成白色

这是编辑器的截图。方框说“正在进行中......”我希望有透明的背景，但它是白色的

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。此外，您可以添加到自定义 - ＆gt;中的样式规则附加CSS 。

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

WordPress透明HTML小部件背景

1 个答案: