CSS-滑动门技术

迷南。 2023-06-08 06:34 67阅读 0赞

所谓滑动们技术就是元素内容增加时背景图片也跟着变宽（不会变形），不需要设置盒子的宽，不需要修改背景图大小；想要使用滑动门技术图片要足够宽才行

<a href="#" class="box">
      <span>span</span>
    </a>

主要思路：a 标签是行内元素需要转成行内块级元素，设置背景图（图片左对齐，不重复）；span 标签同样转成行内款级元素，设置背景图片右对齐不重复

示例：

<div>
      <a href="#" class="box">
        <span>span</span>
      </a>
      <a href="#" class="box">
        <span>span 标签</span>
      </a>
    </div>

/* 设置左半边背景图 */
    a.box { 
      /* 转行内块元素，方便设置背景图 */
      display: inline-block;
      height: 33px;
      /* 行高等于元数据高度，单行文本垂直居中 */
      lien-height: 33px;
      color: #fff;
      padding-left: 15px;
      /* 设置背景图，不重复；背景图默认左对齐 */
      background: url(./images/bg.png) no-repeat;
    }
    
    /* 行内块、块级元素未设置宽高时其宽高由内容决定 */
    
    /* 设置右半边背景图 */
    a.box span { 
      display: inline-block;
      padding-right: 15px;
      /* 背景图片右对齐，不重复 */
      background: url(./images/bg.png) no-repeat right top;
    }

![在这里插入图片描述][2019101710173879.png]

[2019101710173879.png]: /images/20230531/6fc264bca46348dc966f05fcfd9bd95d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读

相关下拉滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

悠悠/ 2024年02月17日 22:38/ 0 赞/ 62 阅读

相关数据驱动滑动门

<view class="door"> <view class="title"> <block wx:

秒速五厘米/ 2023年07月17日 04:39/ 0 赞/ 5 阅读

相关 CSS-滑动门技术

所谓滑动们技术就是元素内容增加时背景图片也跟着变宽（不会变形），不需要设置盒子的宽，不需要修改背景图大小；想要使用滑动门技术图片要足够宽才行 <!-- 基本 DOM

迷南。/ 2023年06月08日 06:34/ 0 赞/ 68 阅读

相关 js实现滑动门效果

滑动门效果： ![初始][SouthEast] ![第三道门打开][SouthEast 1] 原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个

待我称王封你为后i/ 2022年09月29日 13:59/ 0 赞/ 192 阅读

相关实用js+css滑动门导航菜单

实用js+css滑动门导航菜单 <html> <head> <title>简易实用，滑动门</title> <meta http-equiv=

冷不防/ 2022年09月21日 15:27/ 0 赞/ 241 阅读

相关简单滑动门！~~~~

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Typ

电玩女神/ 2022年08月23日 14:49/ 0 赞/ 136 阅读

相关 HTML 、CSS 、 JavaScript区别（css精灵图/滑动门）

HTML CSS JavaScript 区别 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. 。CS

冷不防/ 2022年05月17日 00:48/ 0 赞/ 225 阅读

相关 css滑动门效果，文字两侧背景花纹自适应

css滑动门效果：不同长度的文字，两侧的背景图案一致，如下图所示。效果预览： ![70][] 素材图片：t2.jpg ![70 1][] 源代码如下： <

深藏阁楼爱情的钟/ 2022年05月08日 07:56/ 0 赞/ 183 阅读

相关滑动窗口技术

leetcode3.209等题目都是滑动窗口解决的。都是一种在数组这种数据结构中寻找最长，最短的情况，咋一看刚开始想着动态规划可能是这种题目的解法。但是适用于动态规

ゝ一纸荒年。/ 2022年02月01日 14:19/ 0 赞/ 279 阅读

相关 HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）

1.实现多个div盒子横排列，鼠标点上去后显示border，相连的border合并。：利用position：relative的层级比标准流高（后来居上原则），与m

电玩女神/ 2021年11月05日 02:12/ 0 赞/ 285 阅读