CSS半透明框

Question

我想要一个半透明的div，以便在我的背景图像上更好地阅读网站内容。该div有圆角，我遇到了困难与透明度相结合

我该怎么用CSS做到这一点？

Answer 1

你可以只更新你的CSS和修复你的错误：

.TextBOx{ 
    -moz-border-radius:30px; 
    -webkit-border-radius:30px; 
    border-radius:30px; 
    border: #solid 10px #000; 
    background-color: rgba(105,100,100,0.8); 
    width:80%; 
    margin-left: auto ; 
    margin-right: auto ; 
} 

GOED这样吗？

Answer 2

尝试不透明。

div.semiTrans{ 
    opacity:0.8; 
} 

对于旧的IE，您还需要filter:alpha(opacity=80)。

Quir}{smode是一个很好的参考。这个人也来自荷兰。

Answer 3

跨浏览器的不透明度：

-ms-filter: "alpha(opacity=75)"; /* IE8 */ 
filter: alpha(opacity=75); /* Old IE */ 
-khtml-opacity: 0.75; /* Old Safari */ 
-moz-opacity: 0.75; /* Old Firefox, Netscape */ 
opacity: 0.75; /* Standard */ 

打造为你的工具： https://www.alphachannelgroup.com/resources/tools/css-cross-browser-opacity-tool/

Answer 4

您可以使用opacity:0.5;，使对象半透明。表格0至1（100％）。但那也会让孩子们透明。所以你可以最好使用透明的背景颜色。像这样：background-Color:rgba(255,255,255,0.5);半透明的白色背景。

Answer 5

您可以使用此CSS代码来制作透明。

.transparent { 
    zoom: 1; /*to fix the has layout bug in IE older version*/ 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

这里是演示链接http://jsbin.com/kibiruva/1/edit

Answer 6

你可以使用opacity或rgba()来定义你的背景颜色。

不透明的X浏览器例如：

-ms-filter: "alpha(opacity=50)"; /* IE8 */ 
filter: alpha(opacity=50); /* Old IE */ 
-khtml-opacity: 0.50; /* Old Safari */ 
-moz-opacity: 0.50; /* Old Firefox, Netscape */ 
opacity: 0.50; /* Standard */ 

RGBA例子：

background-Color:rgba(255,255,255,0.5); 
*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /*Old IE*/