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 ;
}

去了吗？

Answer 2

跨浏览器不透明度：

-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 3

尝试不透明度。

div.semiTrans{
  opacity:0.8;
}

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

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

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()来定义背景颜色。

Opacity x-browser示例：

-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*/

CSS半透明盒子

6 个答案: