阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS 背景透明文字不透明,兼容到 ie8 的,最简单粗暴的写法

    今天工作中遇到一个需求,

    是要实现“背景透明文字不透明”, 兼容到 IE;

    我开始是用伪元素来做;

    后来试了试 rgba,然后网上搜兼容 IE 方法;

    看到网上很多种写法,都很麻烦,

    很多教程和帖子是这种写法;

    background:rgba(255, 255, 255, 0.6)!important;
    filter:Alpha(opacity=60); background:#fff;
    

    然后再这个子元素下面再让字体凸显出来;

    比如;

    .content { width:180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6)!important;
    filter:Alpha(opacity=60); background:#fff; /* 使用IE专属滤镜实现IE背景透明*/ }
    .content p{ position:relative;} /*实现IE文字不透明*/
    

    ~

    这个需求如果用工具实现,真的是太方便了;

    推荐一个网址:http://www.css88.com/demo/hex_color/

    输入你需要实现的 16 进制颜色;然后输入需要做到的透明度多少;

    然后生成的代码,不要直接用;

    只有一行是针织有用的(把红色框内的代码,复制到需要的类或者 ID 中就可以了;);

    CSS 的 reba 的背景透明,字体颜色不透明

    这种方法的优势是,不需要带操作子元素;而且复杂的 HTML 结构中,操作子类我试了下,好像有点问题(也可能是我搜到的教程方法中不对);

    这个页面自动生成的代码,直接用下就可以了,简单粗暴有效果!、

    IE 亲测背景透明文字不透明

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    本文目录
    目录