仓酷云

标题: 来讲讲：CSS3网页制造实例教程:网页图片遮罩效果 [打印本页]

作者: 再见西城 时间: 2015-1-15 23:10
标题: 来讲讲：CSS3网页制造实例教程:网页图片遮罩效果
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
网页制造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
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

作者: 变相怪杰 时间: 2015-1-20 18:57
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 乐观 时间: 2015-1-29 15:29
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 山那边是海 时间: 2015-2-6 02:43
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 不帅 时间: 2015-2-15 10:09
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 蒙在股里 时间: 2015-3-4 11:25
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 再现理想 时间: 2015-3-11 19:06
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 第二个灵魂 时间: 2015-3-19 09:32
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 谁可相欹 时间: 2015-3-27 19:11
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

欢迎光临仓酷云 (http://www.ckuyun.com/)