代码之家 › 专栏 › 技术社区 › Jack

在HTML/CSS中实现白色不透明效果

opacity css html

Jack · 技术社区 · 14 年前

有没有一种方法可以以跨浏览器兼容的方式实现这种效果,而不必准备单独的图像?

基本上,文本所在的框架具有50%不透明度的白色覆盖。我希望一个解决方案,不涉及创建任何其他图像除了背景,但我不知道这是可能的!

兼容的方式,而不必准备分离的图像?

基本上,文本所在的框架具有50%不透明度的白色覆盖。我希望一个解决方案,不涉及创建任何其他图像除了背景,但我不知道这是可能的!

2 回复 | 直到 8 年前

Bobby Jack 14 年前

尝试RGBA,例如

div { background-color: rgba(255, 255, 255, 0.5); }

像往常一样,这在每一个编写的浏览器中都不起作用。

Jim 8 年前

如果你不能使用 rgba 由于浏览器支持,并且您不希望包含半透明的白色PNG,因此必须创建两个定位元素。一个用于白框,不透明度,另一个用于覆盖文本,纯色。

body { background: red; }

.box { position: relative; z-index: 1; }
.box .back {
    position: absolute; z-index: 1;
    top: 0; left: 0; width: 100%; height: 100%;
    background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }

body.browser-ie8 .box .back { filter: alpha(opacity=75); }

<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
    <div class="box">
        <div class="back"></div>
        <div class="text">
            Lorem ipsum dolor sit amet blah blah boogley woogley oo.
        </div>
    </div>
</body>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前