css 背景图片自适应元素大小
2024-08-30 17:15:29
一、一种比较土的方法,<img>置于底层。
方法如下:
CSS代码:
HTML:
<img src="背景图片路径" />
<span>字在背景上</span>
此时,背景可以自动伸缩,不过底层图片和上面的字是无关联的,想要在屏幕变化的情况下保持二者对应关系不变,需要用百分比表示间距和尺寸。
这种方法可以实现,但是个人感觉不太规范,但当时实在没有更好的办法。
二、CSS3有背景尺寸属性background-size,真是前端的福音。background-size指的是一张全部的图片在背景多大的画布上展示。
方法如下:
div{
width:200px;
height:100px;
background-image:url(bg.jpg);
background-size:100% 100%;
}
HTML:
<div>图片伸缩</div>
我只记录了图片充满整个元素的情况,background-size还有保持图片宽高比等其他用法。
最新文章
- Redsi和Memcached区别总结
- MVC4做网站六后台管理:6.2网站信息设置
- js笔记——js异常处理
- C#实现函数默认值和C#4.0实现默认值
- jQuery插件:跨浏览器复制jQuery-zclip
- 请尝试使用 Console.Read。错误原因
- Day2 summary
- lex/flex 笔记
- C++程序在debug模式下遇到Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call问题。
- git 的记住用户名和密码和一些常用
- Struts2学习笔记--Struts2的体系结构
- 创建FBI树
- div内部实现图片旋转、放大、缩小、拖拽
- Docker入门(一)用hello world入门docker
- 利用crash 分析软死锁问题【转】
- 读懂jquery
- PHP后台图片上传作品 接口
- Linq与Lambda,神一般的工作效率
- tomcat使用中的积累
- array numpy 模块
热门文章
- day29 类中的内置函数方法 __str__ __repr__ __call__ isinstance() issubclass()
- day11 高阶函数 函数式编程
- day10 函数的嵌套执行顺序
- MT【224】反解系数
- 学习Spring Boot:(二十七)Spring Boot 2.0 中使用 Actuator
- Java NIO -- 直接缓冲区与非直接缓冲区
- asp 读cookie 下划线 丢失
- react中实现点击跳转到新页面方法
- (大数 万进制) N! hdu1042
- PHP自动加载(__autoload和spl_autoload_register)