DIV背景半透明文字不半透明的样式-侯体宗的博客

DIV背景半透明文字不半透明的样式
前端 / 管理员发布于 2年前 193

DIV背景半透明，DIV中的字不半透明

代码如下:

<body bgcolor="#336699">
<div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="color:yellow"></span></div>

图层背景半透明，字体颜色也半透明

代码如下:

<div style="filter:alpha(opacity=50);background:#ffffff;width:600">
<span style="position:relative;color:yellow">图层背景半透明，字体颜色不半透明</span>
</div>

***带filter的层一定要有width属性，否则filter无效。***

我们可以用CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果。

例：

黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

上一条：
Ajax客户端异步调用服务端的实现方法(js调用cs文件)
下一条：
vue elementui 实现搜索栏公共组件封装的实例代码

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

近期文章
在go语言中通过随机替换字词来窜改和解读文本信息示例代码(0个评论)
在go语言中使用GOB保存（序列化）和读取文件的流程步骤(0个评论)
在go语言中如何加载GOB和PEM文件的流程步骤(0个评论)
Laravel 10版本将在2023年2月发布，框架代码将有本地类型声明(0个评论)
在go语言中处理结构的私有部分示例代码(0个评论)
在go语言中把字符串中的\斜线删除示例代码(0个评论)
广州开放了是真的，奥密克戎病毒正式更名为：新型冠状病毒感冒是谣言(0个评论)
Laravel 9.42版本发布(0个评论)
天涯论坛突然关闭发帖，只等官宣停运是谣言，中国互联网的青春还在(0个评论)
laravel9 + minio对象存储文件上传流程步骤示例代码(0个评论)

近期评论
博主在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..
Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
t1 在
go语言+beego框架中获取get,post请求的所有参数中评论 UserController) Register这个路由是怎么配置的啊..
landmine 在
在Ubuntu 22.04系统上安装PHP 8.1版本流程步骤中评论真的很有用..
耕品在
JavaScript模块管理的简单实现方式详解中评论实现一不支持ie11，能否解决下..

Top