1. 对背景图片设置属性:background-sizecover;可以实现背景图片适应div的大小。
  2.  
  3. background-size3个属性:
  4.  
  5. auto:当使用该属性的时候,背景图片将保持100% 的大小显示,不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时,图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
  6.  
  7. cover:当使用该属性时,图片将被缩放至恰好能覆盖div,并且图片被隐藏的部分最少,这种属性在大图背景中应用比较广泛。这点比较难理解,需要结合实践理解。
  8.  
  9. 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. C#加载XML方式

    //path:xml文件路径  SECSMessage:xml文件的根元素下的第一个子集元素 <SECSLibrary> <SECSMessage> <Descripti ...

  2. python学习之网路操作

    socket:服务器与客户端的常规操作,但默认创建的的sever.socket是阻塞式,不支持多个客户端的连接,要想连接多个客户端需要引入多线程.但对于IO类型来说大部分时间其实都在IO上与创建多个线 ...

  3. 11,html5为什呢只需要写<!DOCTYPE HTML>

    11,html5为什呢只需要写<!DOCTYPE HTML> html5不基于SGML,不需要对dtd(百科:翻译为文档类型定义,作用是定义xml文档的合法构建模块,成行声明于xml文档中 ...

  4. 02-Docker认识与原理

    目录 02-Docker认识与原理 参考 Docker认识 Docker特性 Docker对比VM Docker社区版本 Docker原理 Docker engine Docker architect ...

  5. vim 一些操作

    在ESC下 gg # 光标跳到开头 dG # 删除光标后的数据 dd # 删除光标所在行 gg dG # 删除全部 (光标跳到开头&删除光标后的数据) x # 删除当前光标下的字符 i # 编 ...

  6. tkinter的listbox、radiobutton和checkbutton学习(2)

    1.tkinter的listbox 1.1 代码 #第1步,导出模块 import tkinter as tk #定义窗口,及其标题.大小和位置 win = tk.Tk() win.title('Li ...

  7. 吴裕雄--天生自然TensorFlow2教程:损失函数及其梯度

    import tensorflow as tf x = tf.random.normal([2, 4]) w = tf.random.normal([4, 3]) b = tf.zeros([3]) ...

  8. 【CSS 】js操作css

    对设置和移除所有 <p> 元素的 "main" 类进行切换: $("button").click(function(){ $("p&quo ...

  9. CSS背景图片设置

    *{ margin:0px; padding:0px; list-style: none; text-decoration: none; font-family: Arial,'Microsoft Y ...

  10. 获取当前表中的最大自增id的下一个自增id值

    SELECT auto_increment FROM information_schema.`TABLES` WHERE TABLE_SCHEMA='{$db_name}' AND TABLE_NAM ...