一、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. 苹果版小黄车(ofo)app主页菜单效果

    代码地址如下:http://www.demodashi.com/demo/12823.html 前言: 最近又是公司项目上线一段时间了,又是到了程序汪整理代码的节奏了.刚好也用到了ofo主页菜单的效果 ...

  2. 给UITextField设置头或尾空白

    有时候,我们需要在UITextField的头尾加入一些空白,如下图所示: 其中,黄色和红色部分代表空白. 实现起来,比较简单,只需要设置UITextField的leftView.leftViewMod ...

  3. vim-colors-config

    在vim中,主题是以插件形式存在.其中系统自带的主题,存放在$VIMRUNTIME/colors文件夹下,以*.vim命名.(注:查看$VIMRUNTIME请在vim中执行 :echo $VIMRUN ...

  4. linux无线网络配置_转

    转自:http://www.cnblogs.com/dartagnan/archive/2010/12/05/2003521.html   一位资生linux 原文:http://www.hpl.hp ...

  5. phpexcel导入xlsx文件报错xlsx is not recognised as an OLE file 怎么办

    最初的做法  代码如下 1 include 'classes/PHPExcel/IOFactory.php'; 2 $inputFileName = $target; 3 $objReader = n ...

  6. Android Studio SDK Manager 解决无法更新问题

    一.首先要保证你可以FQ上google等网站. 这个..如何越过GFW就要靠自己了..网上也有很多教程.. 二.更改android sdk manager的option设置 选择Tools→Opini ...

  7. js 抢月饼

    面源码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  8. 一次 read by other session 的处理过程

     一个哥们给我打电话.他说系统中一直出现等待事件 read by other session .而且该等待都是同一个sql引起的.比較紧急,请我帮忙远程看看. 远程过去之后,用脚本把 等待事件给抓 ...

  9. mysql 与mongodb的特点与优劣

    首先我们来分析下mysql 与mongodb的特点与优劣.下面是我以前做的ppt的部分截图. 再来分析下应用场景,a.如果需要将mongodb作为后端db来代替mysql使用,即这里mysql与mon ...

  10. html5小趣味知识点系列(二)tabindex

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