仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2873|回复: 9
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS3网页制造实例教程:网页图片遮罩效果

[复制链接]
再见西城 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:10:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
网页制造Webjx文章简介:巧用CSS3border制造图片遮罩效果.
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>图片遮罩效果webjx.com</title>
<styletype="text/css">
.trans{
-webkit-transition:0.3sease;
-moz-transition:0.3sease;
-ms-transition:0.3sease;
-o-transition:0.3sease;
transition:0.3sease;
}
.test_outer{
display:block;
width:200px;
height:200px;
margin:1emauto;
position:relative;
overflow:hidden;
}
.test_cover{
width:40px;
height:40px;
border:200pxsolidrgba(0,0,0,.35);
border-radius:50%;
position:absolute;
left:-115px;
top:-165px;
}
.test_cover:hover{
width:140px;
height:140px;
left:-170px;
top:-165px;
}
.test_cover:hover:after{
content:"秋思-尝鼎一!";
text-align:center;
margin:55px0012px;
color:#fff;
font:bold16px/1.2微软雅黑;
text-shadow:1px1pxrgba(0,0,0,.35);
position:absolute;
}
</style>
</head>

<body>
<ahref="#"class="test_outer">
<spanclass="test_covertrans"></span>
<imgsrc="这里放一个图片的地点"width="200"height="200"/>
</a>
</body>
</html>
实在现道理是使用个border偌年夜的半通明边框属性(demo中边框宽度200像素),边框色彩为rgba玄色半通明,然后50%圆角。再用用定位把它掩盖在图片下面。
次要中心代码:
.test_cover{
width:40px;
height:40px;
border:200pxsolidrgba(0,0,0,.35);
border-radius:50%;
position:absolute;
left:-115px;
top:-165px;
}
然后表面再用个父容器把它溢出埋没失落就能够了
.test_outer{
display:block;
width:200px;
height:200px;
margin:1emauto;
position:relative;
overflow:hidden;
}
就这么复杂....
</p>
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
小女巫 该用户已被删除
沙发
发表于 2015-1-17 11:48:57 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。
变相怪杰 该用户已被删除
板凳
发表于 2015-1-20 18:57:31 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
乐观 该用户已被删除
地板
发表于 2015-1-29 15:29:02 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
山那边是海 该用户已被删除
5#
发表于 2015-2-6 02:43:04 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
不帅 该用户已被删除
6#
发表于 2015-2-15 10:09:35 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
蒙在股里 该用户已被删除
7#
发表于 2015-3-4 11:25:46 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
再现理想 该用户已被删除
8#
发表于 2015-3-11 19:06:22 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
第二个灵魂 该用户已被删除
9#
发表于 2015-3-19 09:32:58 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
谁可相欹 该用户已被删除
10#
发表于 2015-3-27 19:11:52 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 15:10

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表