html - 在 CSS 中重新创建设计

Question

如果文本是可变的并且我每次都不知道它的长度，如何在 CSS 中重新创建此文本效果？（它来自 CMS）

我还希望背景有轻微的不透明度，而不是文字。

Answer 1

两个带填充的 div。背景将使用 rgba，因此您可以控制不透明度。例如：

div { padding: 10px; background: rgba(255,255,255,.5) }

Answer 2

对于透明背景：

<element>{
    background-color: rgba(255,102,0,.75);
}

最后一个值a是不透明度。要使其在 Internet-Explorer 中工作，请使用过滤器：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BFFF6600,endColorstr=#BFFF6600);
zoom: 1;

前两个十六进制数字是不透明度 ( 0 = 00, 100% = FF)，最后 6 个是十六进制值中的颜色。

要使段落与它们包含的文本长度完全相同，请使用以下命令：

p{
   display:inline-block;
   padding: <at will>;
}

Answer 3

给内联或内联块元素一个半透明的背景和一点填充。RGBA 颜色最容易实现半透明。（有关浏览器兼容性，请参阅http://caniuse.com/#search=rgba）。

例子：

.text
{
    display: inline;
    background-color: rgba(255, 100, 0, 0.8);
    padding: 10px;
    color: #fff;
    font-weight: bold;
}

http://jsfiddle.net/6XUh7/