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

Answer 2

您只需使用background-color: rgba(0,0,0, 0.5)这将生成一个50％不透明度的黑盒子

rgba代表红绿蓝Alpha，之后的数字对应于那些字母。 0,0,0表示零红，零绿，零蓝，最后一个数字是0 - 1，其中0.5是50％等。

他们在该页面上的使用方式是使用1px x 1px .png并具有透明度。不幸的是，如果没有全新的图像来拉伸（或重复），你就无法改变黑色的透明度。使用RGBA，您可以获得相同的结果，但您可以控制颜色和alpha。

Answer 3

它使用background-image属性来实现该效果。它是一个1x1像素的图像，透明度在x和y上重复。

使用的图片：http://trishkhoo.com/wp-content/themes/motion/images/blacktrans.png

您不需要使用图片，但某些浏览器在使用 rgba(r,g,b,a) css函数应用颜色时不支持alpha因素，所以这是我认为最好的跨浏览器选项。

如何实现黑暗/透明文本框？

3 个答案: