栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

部分透明的蒙版效果实现思路(兼容ie6)

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力
先看下要实现的效果图片
 
png24位的图片如下
 
与普通的蒙版效果不一样,需要有一个空白的地方显示页面上原有的动态内容;

实现思路如下:1:要支持图的半透明效果,需要采用png24格式(png8不支持半透明效果,保存后会变成底色位黑色的图片)

为兼容ie6需要加hack:

_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片的路径',sizingMethod='crop');

2:建立蒙版,此蒙版只要罩住除图片以外的部分即可,图片所在的区域不能挡住

那么如何实现第二部?a:建立一个背景色为透明的div用来存储照片所在的部分,div的宽度和高度就等于图片的宽度和高度;

b:蒙版部分通过div的border进行设置,border的颜色为黑色,透明度为50,那么border的四个width如何设置?

  *border-left-width:图片的left位置

  *border-right-width:屏幕宽度-图片的left位置-图片的宽度

  *border-top-width:图片的top位置

  *border-bottom-width:页面高度-图片的top位置-图片的高度
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/217552.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号