一、background-size

  1.具体设定的px值,及北背景图片的具体宽高

  2.设定的百分比,相对于容器的宽高

  3.设定三个铺设类型:

    (1)cover: 以宽 / 高 为基本,尽可能的去铺满整个容器,溢出部分截掉

    (2)contain:以宽 / 高 为基本,尽可能的去铺满整个容器,但要求不能溢出容器

二、background-repeat: repeat / no-repeat; 一张图片无法铺满整个容器时,是否重复图片平铺

三、background-position:

  1、具体两个px值,设定的为相对于容器左上角的偏移值

  2、两个百分比值: 计算公式为 (容器的宽度 - 背景图片的宽度) * 百分比 ,高度类推即可

  3.left, right, top, bottom, 分别相当于 第一个百分比的 0% ,100%,第二个百分比的 0%,100%

  4.center, 相当于百分比的50%

  注意: background-position必须要写两个值,不能系一个值来代替两个相同的值

  

css属性background的更多相关文章

  1. css属性 background

    background 在一个声明中设置所有的背景属性. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜 ...

  2. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  3. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  4. CSS下背景属性background的使用方法

    背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...

  5. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  6. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  7. CSS代码示例-背景属性(background)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS基础-background的那些属性

    background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background ...

  9. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

随机推荐

  1. src-resolve: 无法将名称 'extension' 解析为 'element declaration' 组件。

    activiti流程部署时,出现“src-resolve: 无法将名称 'extension' 解析为 'element declaration' 组件.”错误. 出错原因:项目所在路径中有中文.

  2. 那些奇妙的&quot;大师&quot;是怎样炼成的(科学、迷信、心理)

    近期王林大师从神坛上掉下来直接掉进了监狱,有关他的非常多神话也相同被撕下了. 事实上这类奇妙的大师在地球上非常多,美国的非常多"邪教"头目,国内的邪教头目都属于这一类.国内比較轰动 ...

  3. 约瑟夫环用php实现

    百度百科的解释:约瑟夫环(约瑟夫问题)是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列:他的下一个人又从1开始报数,数 ...

  4. Html中嵌套其他HTML文件的几种方法(转)

    给大家整理了3个方法,一个是HTML的iframe标签,别两个是JS引用.比如要在arr.html文件里引用index.html文件,方法如下. HTML引用方法: <iframe name=& ...

  5. webAPI 405

    web.config 配置 <system.webServer> <modules> <remove name="WebDAVModule" /> ...

  6. php序列化&反序列化坑

    一: 在php中如果我们统一编码是没有什么问题了,但是很多朋友会发现一个问题就是utf8和gbk编码中返回的值会有所区别: php 在utf8和gbk编码下使用serialize和unserializ ...

  7. VM虚拟机内ubuntu无法连接到网络

    VM虚拟机内ubuntu无法连接到网络 解决:编辑网络,将网路都删除掉.又一次加入网络桥接和NAT链接. .又一次连接就可以,查看一下ip地址. 方法2: 虚拟机中新装ubuntu 编辑虚拟网络,先恢 ...

  8. 阿里云 经典网络使用ClassicLink连接到专用网络后,192.168网段需要添加路由

    配置后,专用网络中的机器Ping不通经典网络, 查帮助说192.168网段需要手动添加路由表. 抓包能在经典网络中收到专用网络中过来的数据包,但回复的数据包不能正确发出去. 先用 route -n 查 ...

  9. PyQt5 Function Parameter Declaration

    addWidget self.lcd = QLCDNumber() grid.addWidget(self.lcd,0,0,3,0) grid.setSpacing(10) void QGridLay ...

  10. Babel中的stage-0,stage-1,stage-2以及stage-3

    大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具.大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码: { "presets" ...