一、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. Android实用工具

    1 json类:hiJson 格式化json字符串 2 sqlite类:sqlitespy,SQLiteExpertSetup 3

  2. c#通过URL地址从服务器上下载文件

  3. wcf 入门示例

    刚开始学习wcf,根据官方网站的说明写下的代码 第一步: 建立一个类库项目GettingStartedLib,首先添加wcf引用System.ServiceModel; 添加接口ICalculator ...

  4. C# 接口的隐式与显示实现说明

    以前在用到接口时,从来没注意到接口分为隐式实现与显示实现.昨天在浏览博客时看到相关内容,现在根据自己的理解记录一下,方便日后碰到的时候温习温习. 通俗的来讲,"显示接口实现"就是使 ...

  5. iOS collectionView添加类似tableView的tableHeaderView

    我们都知道UITableview有一个tableHeaderFooterView,这样我们在布局页面的时候,如果顶部有轮播图,可以直接把轮播图设置为tableView的HeaderFooterView ...

  6. Win8运行金山词霸2005的问题

    一般是以下几种状况: 1.运行进入假死 2.取词模块报错 3.词库突然丢失 原因: 文件权限和注册表权限问题 解决方法: 进入"..\Kingsoft\PowerWord 2005\&quo ...

  7. CentOS下使用yum快速安装memcached

    1. 查找Memcached yum search memcached 首先检查yum软件仓库中是否存在memcached,如果有 直接进入第3步安装即可,否则执行第2步. 2. 安装第三方软件库(可 ...

  8. 关于inittab的几个命令

    1. 查看default runlevel(默认运行等级)的方法: $cat /etc/inittab | grep id id:3:initdefault: # <id>:<run ...

  9. [C++]二维数组还是一维数组?

    记得刚学习C++那会这个问题曾困扰过我,后来慢慢形成了不管什么时候都用一维数组的习惯,再后来知道了在一维数组中提出首列元素地址进行二维调用的办法.可从来没有细想过这个问题,最近自己写了点代码测试下,虽 ...

  10. xml初学简单介绍

    什么是XML? 1.全称Extensible Markup Language,可扩展标记语言,W3C组织公布. 2.XML用来保存有一定结构关系的数据. 3.标签的嵌套,实质是一串字符串. 4.跨平台 ...