首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 生活随笔 > 正文

    css如何设置层透明:css背景色设置透明

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

     于是稍作研究下，在此记录下：

    当然，达到透明，很多一般使用三种方式：

    1、直接使用透明图片，这个确实比较直接省事，不过往往需要再制作图片，个人认为，可维护性不好

    2、使用如下代码设置透明度，可是你会发现这种方式不能对其子节点的元素设置不透明

    代码如下:

    filter: alpha(opacity = 50);

    -moz-opacity: 0.5;

    -khtml-opacity: 0.5;

    opacity: 0.5;

    3、这种方法仅仅使用简短的代码，即可以实现设置透明度，也可以实现其中的文字以及节点中的元素设置不透明

    首先需要先对需要透明的层设置如下样式：

    代码如下:

    background: rgba(255,255,255,0.5) none repeat scroll !important;/* 确保火狐等浏览器的透明度，同事达到设置其子节点中的元素不透明 */

    background:#fff;filter: alpha(opacity = 50);/* 为IE浏览器设置滤镜来达到透明的效果 */

    然后对其子节点设置如下样式：

    代码如下:

    position: relative;/* 用来设置IE浏览器中其子节点中的元素不透明 */

    如此，就可以实现设置透明度，也可以实现其中的文字以及节点中的元素设置不透明了。

    css设置透明层

    用下面的样式表定义你的层

    .alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝

    解释：

    Opacity=开始的不透明度(100的话就不透明了)

    FinishOpacity=结束的不透明度(100的话就不透明了)

    Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊...

    StartX=开始透明的X坐标，基本上为图片、层的左上角(0)

    StartY= 开始透明的Y坐标，基本上也为图片、层的左上角(0)

    FinishX=结束透明的X坐标，基本上也图片、层的右下(图片、层的宽度)

    FinishY=结束透明的Y坐标，基本上也为图片、层的右下角(图片、层的高度)

    黑白照片 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

    • css如何设置层透明:css背景色设置透明 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文css如何设置层透明:css背景色设置透明由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.