HTML图片叠加图片

效果图：


div背景图.png

通过三个div设置，img标签不可以嵌套标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #div{
            margin: 100px auto;
            width: 480px;
            height: 331px;
            background-image: url("12.jpg");
        }
        #div1{
           width: 112px;
            height: 113px;
            background-image: url("已添加.png");
            float: right;
        }
        #div2{
            background-image: url("喜欢-按下.png");
            width: 45px;
            height: 40px;
            float: right;
            /*position: relative;*/
            /*top: 286px;*/
            /*left: 100px;*/
            margin-top: 286px;
            margin-right: -100px;
        }
    </style>
</head>
<body>
     <div id="div">
         <div id="div1"></div>
         <div id="div2"></div>
     </div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1赞 92
  • HTML+CSS摘要
    本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,331评论 0赞 5
  • DIV+CSS学习笔记总结篇
    转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32赞 459
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,352评论 1赞 41
  • Reactor模式
    反应器设计模式（Reator pattern）是一种基于事件驱动的设计模式，常用于高并发场景下，常见的像Node....
    廿陆小生阅读 2,255评论 0赞 5