本文通过HTML5和CSS技术，详细介绍了如何创建一个图片遮罩效果。首先，介绍了所需的预备知识，包括图片素材、DW软件以及HTML/CSS基础。接着，逐步讲解了实现遮罩效果的具体步骤：在body部分添加代码，然后应用CSS特效来完成设计。最后，展示了运行后的截图，直观地呈现了遮罩效果。
储备知识：
1.图片素材
2.DW软件
3.HTML/CS
步骤
1.body代码
<body>
<div class="wrapper">
<hgroup>
<h2>一品水果 唇齿留香</h2>
<h2>泰国黑金刚莲雾</h2>
<h2></h2>
<h2></h2>
</hgroup>
</div>
</body>2.css特效
<style type="text/css">
.wrapper{
width: 266px;
height: 250px;
border: 1px solid #ccc;
background: url("images/shuiguo.png");
margin: 20px auto;
position: relative;
overflow: hidden;
}
.wrapper hgroup{
position: absolute;
left: 0;
top: -250px;
width: 266px;
height: 250px;
background: rgba(0,0,0,0.5);
transition: all 0.5s ease-in 0s;
}
.wrapper:hover hgroup{
position: absolute;
left: 0;
最低0.47元/天 解锁文章
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
