html - 如何添加具有自定义背景和边框的html文本

Question

我有一个 wordpress 网站。我刚刚为其购买了一个默认不支持 custom.css 的主题。我不想弄乱默认文件，因为我不是技术人员。我以前通过简单地制作自定义块引用来完成此操作。

所以我想做的是在我的页面上的文本中添加一个带有边框的自定义背景：

• 我希望背景是纯黑色，透明度为 60%
• 我想要一个图像作为边框，只在左侧，重复。
• 在所有侧面保留一点填充，以使文本不会到达角落。
• 文本应为白色，任何字体和大小。

我一直在网上寻找并尝试了很长一段时间，但没有任何结果。如何创建此自定义边框/背景？

Answer 1

为什么不创建自定义 css 文件，然后将其导入默认文件？

@import url(你的自定义css的url)

编辑自埃里克邮报：

.example {
  /* Set Background Black 60% opacity */
  background-color:rgba(0,0,0,0.6);
  /*Text Color */
  color: "#FFF";
  /* Text-padding */
  padding: 5px;
  /*Border creation */
  border-left: 12px solid transparent;
  -moz-border-image:url("border-image") 12 repeat;
  -webkit-border-image:url("border-image") 12 repeat ;
  border-image:url("border-image") 12 repeat ;

}

如果您只是想在包含其他元素的页面一侧设置边框，您应该查看位置或浮动 div。另请注意，如果 IE 对您来说是重要的浏览器，则这些设置将不起作用。

Answer 2

以下是如何设置自定义边框和背景样式的先机：

#example {
    border-width: 12px;
    -moz-border-image:url("border-image") 12 repeat;
    -webkit-border-image:url("border-image") 12 repeat ;
    border-image:url("border-image") 12 repeat ;
}

示例：http: //jsfiddle.net/HBzQm/