html - 如何实现深色/透明文本框？

Question

在背景之上实现“深色/透明”文本框的最佳方式是什么(示例:http://trishkhoo.com/2013/04/i-knew-exactly-how-she-felt/)

请查看上面链接中显示的标题:

“我很清楚她的感受提交如下:Trish Khoo 的随机沉思 — 5 条评论”它在一个更暗但又透明的盒子里。

如何使用简单的 css/html 实现这一点？

我希望这是问这个问题的合适地方。到目前为止，Stackoverflow 一直是我解决设计/开发相关问题的首选来源!谢谢。

Answer 1

我猜你的意思是一个简单的具有半透明背景颜色的 DIV，对吗？

你可以试试这个:

.box{
    width:300px;
    height:100px;
    background-color:rgba(0,0,0,0.5); /* where 0.5 means 50% opacity */
/* and for a full compatibility on older browsers like ie7-8-9 you can use the filter property  */
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;

}

FIDDLE