当前位置: 首页 > news >正文

CSS 元素透明

  1、HTML 元素透明

  其实本身,CSS 实现元素透明是件容易事儿。直接上代码:

 
opacity:.5

  opacity 指的是不透明度,取值为 0~1 之间,1 表示完全不透明,0 表示完全透明

A 级浏览器基本都支持 opacity 属性,但碰上 IE,总没好事。不过 IE 有滤镜,可以帮

助我们拐弯抹角地搞定不透明度:

 
filter:alpha(opacity=50);

  注:事实上会碰到透明背景层,而 opacity 属性是会继承的,避免这个问题,需要结合

定位来实现。

在 CSS3 中,还可以使用 HSLA(色调、饱和、亮度、透明度)或者 RGBA(红、

绿、蓝、透明度)来实现元素透明。例如:

2、背景图片透明

有一个值得关注的问题是,PNG8 格式的图片在 IE6 下仅支持全透明,也就是说,IE6 

下使用 PNG8 无法实现背景的半透明效果。透不透明其实有时候无所谓,但问题是全透

明状态下,会导致图片出现恶心的毛边。虽然可以在导出 PNG8 时,通过选择杂边颜色

或者去除杂边的方式解决,但并不完美。

可喜的是,PNG24 支持全透明,所以 PNG24 就很威猛了,在图片透明的方案中,它

绝对是武力指数最高的。

但碰上 IE,另一个恶心的问题又出现了,IE6 不支持支持半透明的 PNG24 透明图片

(可能有点拗口)。

咋办?滤镜!

直接上代码:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

  但碰上 IE6,又悲剧了。在 CSS 文档和页面地址不一致时(比如很多网站会将静态资

源放置于和站点本身不同域的 CDN 服务器上),会导致滤镜引用的图片不可获取。所

以一旦资源跨域,必须保证图片地址为绝对路径。

转载于:https://www.cnblogs.com/xupeiyu/p/3640853.html

相关文章:

  • 【转】网站布局--瀑布流式布局
  • 使用Python实现Hadoop MapReduce程序
  • centos svn快速搭建
  • 一个IO的传奇一生(8) -- elevator子系统
  • linux:shell脚本格式
  • CSS自定义select下拉选择框(不用其他标签模拟)
  • 关于一级指针和二级指针作为参数的探究
  • 2014年4月15日星期二java学习历程
  • Amazon Workspace DaaS服务快速导读
  • http 错误
  • Unity3d 屏幕截图。并保存。iOS
  • quota .1
  • 34、最简单的mvc框架tiny,总结分析V2版思路
  • linux ----系统下各个文件夹的作用及系统启动顺序
  • 妙趣横生的算法--二叉树
  • android 一些 utils
  • const let
  • GraphQL学习过程应该是这样的
  • input实现文字超出省略号功能
  • Java多态
  • Java新版本的开发已正式进入轨道,版本号18.3
  • js作用域和this的理解
  • Objective-C 中关联引用的概念
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • WordPress 获取当前文章下的所有附件/获取指定ID文章的附件(图片、文件、视频)...
  • 大型网站性能监测、分析与优化常见问题QA
  • 如何借助 NoSQL 提高 JPA 应用性能
  • 算法-图和图算法
  • 找一份好的前端工作,起点很重要
  • 1.Ext JS 建立web开发工程
  • Android开发者必备:推荐一款助力开发的开源APP
  • NLPIR智能语义技术让大数据挖掘更简单
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • #pragma once与条件编译
  • (二)丶RabbitMQ的六大核心
  • (附源码)spring boot智能服药提醒app 毕业设计 102151
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (三) diretfbrc详解
  • (四)c52学习之旅-流水LED灯
  • (转)winform之ListView
  • (转)重识new
  • .net core 6 使用注解自动注入实例,无需构造注入 autowrite4net
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .net core开源商城系统源码,支持可视化布局小程序
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .NET 将混合了多个不同平台(Windows Mac Linux)的文件 目录的路径格式化成同一个平台下的路径
  • @cacheable 是否缓存成功_Spring Cache缓存注解
  • [20161101]rman备份与数据文件变化7.txt
  • [ActionScript][AS3]小小笔记
  • [APIO2015]巴厘岛的雕塑
  • [ASP]青辰网络考试管理系统NES X3.5
  • [CareerCup] 17.8 Contiguous Sequence with Largest Sum 连续子序列之和最大
  • [CF482B]Interesting Array
  • [Delphi]一个功能完备的国密SM4类(TSM4)[20230329更新]