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

最新推荐文章于 2023-09-02 16:59:47 发布

idjl

最新推荐文章于 2023-09-02 16:59:47 发布

阅读量8.4k

点赞数

分类专栏： html，css学习笔记文章标签：前端 css

本文链接：https://blog.csdn.net/u010071211/article/details/82993609

版权

html，css学习笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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>

idjl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css滑动门效果，文字两侧背景花纹自适应

css滑动门效果：不同长度的文字，两侧的背景图案一致，如下图所示。效果预览：素材图片：t2.jpg源代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Com
复制链接

扫一扫