来讲讲：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技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-2-6 02:43:04

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

只看该作者 · 发表于 2015-2-15 10:09:35

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-4 11:25:46

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-3-11 19:06:22

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-3-19 09:32:58

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-3-27 19:11:52

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

		自动登录	找回密码
密码			立即注册

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

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

相关帖子