前端基础知识学习——滑动门（利用背景图像的可层叠性创造特殊效果）十二

~小先生~

已于 2023-07-10 15:25:22 修改

阅读量269

点赞数

分类专栏：前端 Html Css 文章标签：前端学习

于 2023-07-06 09:30:53 首次发布

本文链接：https://blog.csdn.net/weixin_45496521/article/details/131568761

版权

前端同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

Html

16 篇文章 1 订阅

订阅专栏

Css

12 篇文章 1 订阅

订阅专栏

滑动门：利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。
举例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    /* 宽度跟着父级  高度由子级决定 */
    .btn{width: 100px;background: url(img/btn.png) repeat-x;  }
    .btnl{background: url(img/btnL.png) no-repeat; }
    .btnr{height: 31px;background: url(img/btnR.png) no-repeat right 0;}
    .btn1{width: 100px; background: url(img/btn2.png) no-repeat;}
    .btn2{height: 31px; background: url(img/btnR.png) no-repeat right 0;}
    </style>
</head>
<body>
    <!--三层嵌套 没有宽度限制-->
    <div class="btn">
        <div class="btnl">
            <div class="btnr"> 第一个按钮  </div>
        </div>
    </div>
      <!--二层嵌套 有宽度限制  宽度超过背景一像素宽度会产生缝隙-->
    <div class="btn1">
        <div  class="btn2">第二个按钮</div>
    </div>
</body>
</html>