0

在背景上实现“黑暗/透明”文本框的最佳方法是什么（例如：http ://trishkhoo.com/2013/04/i-knew-exactly-how-she-felt/ ）

请参阅上面链接中显示的标题：

“我确切地知道她的感受 归档在：Trish Khoo 的随机沉思 - 5 条评论”它是在一个较暗但透明的盒子里。

如何使用简单的 css/html 来实现？

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

4

3 回答 3

3

我猜你的意思是一个带有半透明背景颜色的简单 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;

}

小提琴

于 2013-04-26T19:23:06.023 回答
2

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

rgba 代表 Red Green Blue Alpha，后面的数字对应于这些字母。0,0,0，表示零红色，零绿色，零蓝色，最后一个数字是 0 - 1 数字，其中 0.5 是 50%，依此类推。

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

于 2013-04-26T19:21:15.377 回答
1

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

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

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

于 2013-04-26T19:23:17.947 回答