css 背景图片自适应元素大小
一、一种比较土的方法,<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还有保持图片宽高比等其他用法。
css 背景图片自适应元素大小的更多相关文章
- css -- 背景图片自适应屏幕大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- html/css背景图片自适应分辨率大小
<style type='text/css'> .bgbox { position: absolute; left: 0; top: 0; width: 100%; overflow: h ...
- css 背景图片自适应分辨率大小 兼容
拉伸,all浏览器兼容.bg{ background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg); filter:&q ...
- HTML中使背景图片自适应浏览器大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- css 背景图片自适应
body{ height:100%; overflow:hidden;} .bg { background-image: url(../../img/beijing.jpg); width:100%; ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- CSS 背景图片的定位和缩放
在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
随机推荐
- day22 time模块
表示方式有三种 时间戳 给机器看的 float格式 格式化的字符传 给人看的 格式化时间 元祖 计算用的 结构化时间 1 # 时间戳时间 2 # 返回一个时间戳,表示从1970.1.1日到现在的秒数 ...
- 用树莓派改装电风扇及实现Android遥控
最近天气很热,我租的房子又没有空调,基本上风扇一开就是一晚上,结果经常起床后发现口干舌燥的.我觉得这肯定是因为整晚吹风扇搞的,不管是不是,反正我觉得就是了.不开风扇吧,热!开风扇吧,早上起来不舒服,怎 ...
- 【转】用宏定义代替printf函数
问题提出 有时候我们想用宏定义来决定是编译debug版本的代码还是release的代码,dubug版本的代码会通过printf打印调试信息,release版本的代码则不会.我们总不能对每一条print ...
- 洛谷 P4408 逃学的小孩 解题报告
P4408 [NOI2003]逃学的小孩 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?&q ...
- bzoj3209 花神的数论题——数位dp
题目大意: 花神的题目是这样的 设 sum(i) 表示 i 的二进制表示中 1 的个数.给出一个正整数 N ,花神要问你 派(Sum(i)),也就是 sum(1)—sum(N) 的乘积. 要对1000 ...
- JAVA注释的另一种神奇用法
每个JAVA程序员在写程序的时候一定都会用到注释,本篇博客不是讲怎么定义注释,而是说明注释神奇的一种写法. /** * 这是一个测试类 */ public class Test { /** * 程序的 ...
- the difference __str__ and __repr__
First, let me reiterate the main points in Alex’s post: The default implementation is useless (it’s ...
- Scala进阶之路-Spark底层通信小案例
Scala进阶之路-Spark底层通信小案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark Master和worker通信过程简介 1>.Worker会向ma ...
- 函数和常用模块【day05】:不同目录间进行模块调用(八)
本节内容 1.背景 2.函数功能解释 3.绝对路径和相对路径 4.不同目录间进行模块调用 一.背景 之前写了软件开发目录规范这篇博客,相信很多人都已经知道,我们在写程序时需要遵循一定的规范,不然,就算 ...
- springboot下实现邮件发送功能
springboot给我们封装好了邮件功能,非常简单,只需要稍微配置下就ok. 引入jar <dependency> <groupId>org.springframework. ...