CSS 滑动门,背景拉伸

最新推荐文章于 2021-02-21 22:29:23 发布

houyanhua1

最新推荐文章于 2021-02-21 22:29:23 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 滑动门

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79523236

CSS 专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的滑动门技术，通过a标签和span标签的组合来创建可自适应背景图效果的导航按钮。无论文本长度如何变化，背景图的边缘始终保持不变，从而实现了美观且灵活的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑动门：文字的多少决定标签的大小决定背景图的拉伸效果。无论文字多少，背景图的边缘不变(不拉伸)。

2.html(a标签和span标签的背景层叠在一起,一个从右对齐,一个从左对齐)：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
        <style type="text/css">
             li{
				list-style: none;
             	float:left;
             }
			li a{
				height: 35px;
				background-image: url("bg_r1_c1.png");  //默认从左边对齐
				background-repeat: no-repeat;
				padding-left: 7px;
				display: inline-block;
				color: white;
			 }

			li span{
				height: 35px;
				background-image: url("bg_r1_c2.png");
				background-repeat: no-repeat;
				background-position: right;  //从右边对齐
				display: inline-block;
				padding-right:22px;
				line-height: 35px;
			  }
			li a:hover{
				background:url("bbg_r1_c1.png");
              }
			li a:hover span{  /*选择器的写法*/
				background:url("bbg_r1_c2.png") right;
              }
        </style>
    </head>
    <body>

    	  <ul>
    	  	 <li>
    	  	 	 <a href="#">    <!--a标签嵌套span标签，实现背景图层叠-->
    	  	 	 	 <span>百度一下</span>
    	  	 	 </a>
    	  	 </li>

    	  	  <li>
    	  	 	 <a href="#">
    	  	 	 	 <span>百度</span>
    	  	 	 </a>
    	  	 </li>
    	  	  <li>
    	  	 	 <a href="#">
    	  	 	 	 <span>中国新闻网</span>
    	  	 	 </a>
    	  	 </li>
    	  </ul>
    </body>
</html>