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

深藏阁楼爱情的钟 2022-05-08 07:56 182阅读 0赞

css滑动门效果：不同长度的文字，两侧的背景图案一致，如下图所示。

效果预览：

![70][]

素材图片：t2.jpg

![70 1][]

源代码如下：

<!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>

[70]: /images/20220508/3a045d571e1e484fb8314c2c3c488a16.png
[70 1]: /images/20220508/d0af095f520b4840b81b8e58ec648d78.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS-滑动门技术

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

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

相关 HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果 ![在这里插入图片描述][20201230172825172.png] ![在这里插入图片描述][20201230172715552.gi

今天药忘吃喽~/ 2023年01月01日 02:48/ 0 赞/ 291 阅读

相关 CSS文字交错滑动效果-001

项目展示技术难点：引用MDN解释：`content: attr(data-text);`是CSS中引用的HTML元素的属性名称。实例： HTML

ゝ一纸荒年。/ 2022年10月01日 11:41/ 0 赞/ 182 阅读

相关 js实现滑动门效果

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

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

相关 CSS-文字效果

1.1、自定义字体: <!doctype html> <html lang="en"> <head> <meta charset="

逃离我推掉我的手/ 2022年07月15日 10:30/ 0 赞/ 390 阅读

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

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

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

相关 css背景图自适应

在开发时，修改了d2admin的登录页面。使用了背景图片，但是ui给的图过于大（可能是我电脑屏幕小哈）无法完整的显示到页面上，所以修改了代码，可以完整显示背景图。代码如下：

迈不过友情╰/ 2022年01月06日 14:09/ 0 赞/ 380 阅读

相关 css 背景图片自适应属性整理

本篇博客主要记录一些使用 `css` 对背景图片自适应的操作整合背景图片取消重复 background-image: url(image.jpg);

电玩女神/ 2021年12月23日 04:21/ 0 赞/ 440 阅读

相关 CSS 让背景图自适应width

在div或者其他容器的style添加 background-size: cover !important; <table style="height:333px;

Love The Way You Lie/ 2021年09月25日 04:50/ 0 赞/ 360 阅读

相关 css3霓虹灯文字效果以及文字背景动画

一.注意点 1.[HTML5中rel属性的prefetch预加载功能][HTML5_rel_prefetch] :rel='stylesheet prefetch'

忘是亡心i/ 2021年09月14日 15:52/ 0 赞/ 603 阅读