css滑动门效果：不同长度的文字，两侧的背景图案一致，如下图所示。
效果预览：
素材图片：t2.jpg
源代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Ding Jianlong Html</title>
<style>
body div{
margin:0;
padding:0;
}
#div1,#div2{
background-image:url('t2.jpg');
background-size:auto 30px;
background-repeat:no-repeat;
width:70px; /*修改此处*/
height:30px;
line-height: 34px;
padding-left:20px;
font-size:16px;
}
#in1,#in2{
background-image:url('t2.jpg');
background-size:auto 30px;
background-repeat:no-repeat;
background-position: -250px 0; /*修改此处*/
height:30px;
}
#div2{
width:182px; /*修改此处*/
}
#in2{
background-position: -135px 0; /*修改此处*/
}
</style>
</head>
<body>
<h1>css滑动门效果，文字两侧背景花纹自适应</h1>
<div id="div1">
<div id="in1">测试</div>
</div>
<div id="div2">
<div id="in2">这是汉字，中国文化</div>
</div>
</body>
</html>