div背景图片自适应
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。
background-size有3个属性:
auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。
contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。
div背景图片自适应的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- 基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览 源码下载 实现的代码. css代码: .jawbone-hero .jaw ...
- 背景图片自适应整个页面CSS+DIV
<body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- div背景图片或颜色不显示的解决办法
背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)D ...
- js 定时更改div背景图片
今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
随机推荐
- php自动读取文件夹下所有图片
$path = 'xxxxx';///当前目录$handle = opendir($path); //当前目录while (false !== ($file = readdir($handle))) ...
- python实现网页登录时的rsa加密流程
对某些网站的登录包进行抓包时发现,客户端对用户名进行了加密,然后传给服务器进行校验. 使用chrome调试功能断点调试,发现网站用javascript对用户名做了rsa加密. 为了实现网站的自动登录, ...
- 计算机二级-C语言-对结构体数据进行求平均值。对结构体数据进行比较处理。
//函数fun的功能是:计算形参x所指数组中N个数的平均值(规定所有数均为正数),作为函数返回,并将大于平均值的数放在形参y所指数组中,在主函数中输出. //重难点:对结构体数据进行求平均值. #in ...
- SQL 层级数据查询出树形状态
WITH TEST AS (SELECT DEPTID,PARENTDEPT,SORTORDER,1 SPAC,CONVERT(CHAR(200),RTRIM(DEPTID)+CONVERT(CHA ...
- VS中使用C的一些函数报错的问题
VS建议采用带_s的函数,如scanf_s.strcpy_s,但这些并不是标准C函数. 要想继续使用此函数,需要在源文件中添加以下指令就可以避免这个错误提示: #define _CRT_SECURE_ ...
- 《Airbnb 早期BP》---创业学习--训练营直播第3课--HHR
1,Airbnb:300亿美金. 一,BP 价值: 1,优秀的BP原则: (1)UCD原则:user centered design,用户为中心的设计.站在投资人视角,回答最关心的问题. (2)清晰原 ...
- P3376 【模板】网络最大流 dinic详解
dinic的核心在于分层和多路增广. 分层的意思是,对于图用bfs搜出每一层,避免出现dfs深度过深的情况. 多路增广,利用的是dfs的回溯性质,这样就可以在一个点增广出它的所有流量. #includ ...
- IOS XE-show memory
有些时候,我们可能会遇到IOS XE设备的high memory的情况.我们可以使用的命令去查看相关信息. 例如: Router# show version Router# show memory R ...
- java之中文乱码处理
有些时候,比如文件操作的时候,特别是文件中有中文,会规定用GBK格式,这时读写文件,可能会出现中文乱码 资源文件乱码 文件内容乱码 资源文件乱码: 解决: PropertiesUtil proper ...
- 大数据篇:MapReduce
MapReduce MapReduce是什么? MapReduce源自于Google发表于2004年12月的MapReduce论文,是面向大数据并行处理的计算模型.框架和平台,而Hadoop MapR ...