html 图片能重叠吗,css两张图片怎么叠加在一起? |
您所在的位置:网站首页 › 两个图片怎么叠加在一起 › html 图片能重叠吗,css两张图片怎么叠加在一起? |
1、新建一个html文件,命名为test.html,用于讲解css怎么把两个图片叠加在一起。 Document2、新建两个div,一个是class属性为a的div,另一个是class属性为b的div。 3、在两个div内分别加上一个图片标签img,并且写上两个图片的路径。 4、使用css对两个div的样式进行定义,(相关课程推荐:css视频教程) 分别设置其position属性为absolute,即两张图片在页面的位置是绝对定位。.a{ position: absolute; } .b{ position: absolute; } 5、使用z-index设置两张图片的叠加的顺序,设置1.jpg在下面,2.jpg在上面。.a{ z-index: 1; position: absolute; } .b{ z-index: 2; position: absolute; } 6、通过left和top设置div距离页面左边缘的距离和距离页面上边缘的位置,实现两个图片叠加。.a{ z-index: 1; position: absolute; left: 120px; top: 120px; } 7、在浏览器打开test.html文件,查看实现图片叠加的效果。 全部代码: Document.a{ z-index: 1; position: absolute; left: 120px; top: 120px; } .b{ z-index: 2; position: absolute; } |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |