使用 CSS 把两个图片叠加, 可以通过 position 定位属性设置两张图片的位置来实现叠加效果. 下面介绍 CSS 怎么把两个图片叠加在一起. 希望对各位有帮助!
1, 新建一个 html 文件, 命名为 test.HTML, 用于讲解 CSS 怎么把两个图片叠加在一起.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- </body>
- </HTML>
2, 新建两个 div, 一个是 class 属性为 a 的 div, 另一个是 class 属性为 b 的 div.
- <div class="a">
- </div>
- <div class="b">
- </div>
3, 在两个 div 内分别加上一个图片标签 img, 并且写上两个图片的路径.
- <div class="a">
- <img src="./css-4.jpg" alt="">
- </div>
- <div class="b">
- <img src="./css-5.jpg" alt="">
- </div>
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 文件, 查看实现图片叠加的效果.
全部代码:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- .a{ z-index: 1; position: absolute; left: 120px; top: 120px; } .b{ z-index:
- 2; position: absolute; }
- </style>
- </head>
- <body>
- <div class="a">
- <img src="./css-4.jpg" alt="">
- </div>
- <div class="b">
- <img src="./css-5.jpg" alt="">
- </div>
- </body>
- </HTML>
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15533.html