网页部分的半透明效果[重复]
Posted
技术标签:
【中文标题】网页部分的半透明效果[重复]【英文标题】：Translucent effect to section of webpage [duplicate] 【发布时间】：2016-03-29 15:54:49 【问题描述】：我有我的网页的背景图片，我有这个
HTML：
<body>
<div class="front">
<p>Hello World</p>
</div>
</body>
CSS：
.front
background-color:silver;
height:200px;
width:200px;
div的宽度和高度是200px,200px。我希望div元素覆盖的区域是半透明的，即。显示模糊背景，但 div 包含的文本也应该清晰。我该怎么做？
【问题讨论】：
【参考方案1】：你需要一个rgba 背景：
background-color: rgba(192,192,192,0.5);
可以使用红绿蓝阿尔法模型 (RGBa) 定义颜色 rgba() 函数符号。 RGBa 将 RGB 颜色模型扩展到 包括 alpha 通道，允许指定 a 的不透明度 颜色。 a 表示不透明度：0=透明； 1=不透明；
【讨论】：
应该真的有一个 rgb 后备，以防浏览器不支持 rgba 是的，对于没有浏览器的人来说，这是一个后备方案。 ;)【参考方案2】：您可以简单地将 opacity: 0.5; 添加到您的 css 类中。
【讨论】：
【参考方案3】：您可以将 rgba 用于背景图像，因为添加不透明度也会将其应用于 div 中的文本。
background-color: rgba(192,192,192,0.5);
但这在 IE 中不受支持。
因此，您可以使用 background-image 属性创建和应用透明背景图像。
【讨论】：
【参考方案4】：您可以对背景图像使用不透明度，并使用before 选择器来保持文本的不透明度：
像这样：
.front
z-index: 1;
.front:before
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url("http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg");
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
height: 200px;
width: 200px;
.font > p
z-index: -1;
opacity: 1;
filter: alpha(opacity=100);
<div class="front">
<p>Hello World</p>
</div>JSFIDDLE DEMO
【讨论】：
【参考方案5】：试试这个css：
.front
background-color:silver;
height:200px;
width:200px;
opacity: 0.4;
根据您的选择增加或减少不透明度。
【讨论】：
【参考方案6】：在 CSS 中使用不透明度是最简单的方法。
【讨论】：
【参考方案7】：好吧，开箱即用，如果您尝试一些不同的标记，您真的可以模糊您的图像。
来了
.front
background-color:silver;
height:200px;
width:200px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
z-index:0;
.back
position: absolute;
top: 0;
<body>
<div class="front"></div>
<div class="back">
<p>Hello World</p>
</div>
</body>【讨论】：
以上是关于网页部分的半透明效果[重复]的主要内容，如果未能解决你的问题，请参考以下文章
UINavigationBar + UIToolBar UIAppearance以及应用程序某些部分的半透明barStyle？