对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小。

background-size有3个属性:

    auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。

    cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。

    contain:当使用该属性时,图片被缩放至最大且能被完全展示出来,但是由于图片的的尺寸比例与div的尺寸比例会有不同,所以当图片不能盖住div时,图片会自动平铺。

div背景图片自适应的更多相关文章

  1. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  2. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  3. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

  4. 背景图片自适应整个页面CSS+DIV

    <body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...

  5. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  6. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  7. div背景图片或颜色不显示的解决办法

    背景图片不显示的原因: 1. css没有被调用 2. css图片地址不对 3. div的高度没有固定,是auto.没有设值或者高度不够 4. div被嵌套 5. div代码不规范 解决办法: (1)D ...

  8. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  9. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

随机推荐

  1. wcftestclient test soap API

    soap 类API测试方法: 1. 打开developer command prompt, 输入:wcftestclient 2. 选中“My Service Project”, 再Add servi ...

  2. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  3. Python实现mysql数据库增删改查

    利用python操作mysql数据库用法简单,环境配置容易,本文将实现对库增.删.改.查的简易封装!   1. 环境配置 安装第三方包  ,导入模块 mysql.connector  pip inst ...

  4. Vue-项目搭建时的常用配置

    1.Vue静态资源存放的选择 assets: 编译过程中会被webpack处理理解为模块依赖,只支持相对路径的形式,assets放可能会变动的文件.static: 存放第三方文件的地方,不会被webp ...

  5. ASP.NET Core搭建多层网站架构【8.3-编写角色业务的增删改】

    2020/01/29, ASP.NET Core 3.1, VS2019 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站架构[8.3-编写角色业务的增删改] 编写最简单的增删 ...

  6. 序列变换 HDU - 5256

    序列变换 HDU - 5256 题目链接 题目 我们有一个数列A1,A2...An,你现在要求修改数量最少的元素,使得这个数列严格递增.其中无论是修改前还是修改后,每个元素都必须是整数. 请输出最少需 ...

  7. put、patch与post区别

    idempotent 幂等的 如果一个方法重复执行多次,产生的效果是一样的,那就是idempotent的:  idempotent的意思是如果相同的操作再執行第二遍第三遍,結果還是一樣. POST方法 ...

  8. 201771010135杨蓉庆 《面对对象程序设计(java)》第八周学习总结

    1.实验目的与要求 (1) 掌握接口定义方法: (2) 掌握实现接口类的定义要求: (3) 掌握实现了接口类的使用要求: (4) 掌握程序回调设计模式: (5) 掌握Comparator接口用法: ( ...

  9. WORKDIR 指定工作目录 每一个 RUN 都是启动一个容器、执行命令、然后提交存储层文件变更

    WORKDIR 指定工作目录 格式为 WORKDIR <工作目录路径>. 使用 WORKDIR 指令可以来指定工作目录(或者称为当前目录),以后各层的当前目录就被改为指定的目录,如该目录不 ...

  10. 进程的用户ID

    进程创建时,系统会在进程上设置几个用户相关的ID 实际用户ID,实际用户组ID,系统根据当前会话登陆的用户信息设置 有效用户ID,有效用户组ID,系统根据所打开的执行文件的模式位,进行设置.set_u ...