html - WordPress 透明 HTML 小部件背景

拥有一个 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 背景绘制为白色

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

最佳答案

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

我们正在使用 id你的标签。 ID不得在页面上重复(有时该规则会因编码错误而中断)。使用此规则:
```
#custom_html-3{
  background: transparent;
  border: none;
}
```
或者如果没有帮助，您可以使用 !important ，这将覆盖所有其他规则，即使它们稍后加载(异常(exception)可能是其他规则，它们也使用 !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。此外，您可以将样式规则添加到自定义 -> 附加 CSS。

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

关于html - WordPress 透明 HTML 小部件背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49660470/

html - WordPress 透明 HTML 小部件背景

上一篇：javascript - 右滚动条上的空白屏幕

下一篇：javascript - 单击鼠标更改div的内容