一、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. Java注解基本介绍

    注解(Annotation),又称元数据(MetaData),提供了一种在代码中添加信息的形式化的方法,将元数据和源代码结合在一起. 1. 外部配置文件如XML存在的问题: 代码复杂度较高,需要编写很 ...

  2. 公网通过代理访问阿里云vpc redis

    前提条件 如果您需要从本地 PC 端访问 Redis 实例进行数据操作,可以通过在 ECS 上配置端口映射或者端口转发实现.但必须符合以下前提条件: 若 Redis 实例属于专有网络(VPC),ECS ...

  3. Tomcat + Spring MVC + HttpClient:怎样使用PUT和PATCH方法传递数据

    在RESTful风格的API中.PUT/PATCH方法一般用于更新数据.在项目的代码中,使用的是HttpClient 4.5,是这样写的: protected JSONObject doHttpUri ...

  4. java严格验证日期是否正确的代码

    package com.xxxx.util; /** * 输入日期 并进行验证格式是否正确 */ public class FDate { public static void main(String ...

  5. 深入理解Tomcat系列之五:Context容器和Wrapper容器

    前言 Context容器是一个Web项目的代表,主要管理Servlet实例,在Tomcat中Servlet实例是以Wrapper出现的.如今问题是怎样才干通过Context容器找到详细的Servlet ...

  6. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  7. Python内置函数之range()

    range(stop)range(start,stop[,step]) 返回一个range对象,第三个参数的含义为:间隔的个数. range对象同时也是可迭代对象. >>> isin ...

  8. java中高级写法

    1.低级写法: if (null != redisCacheService.get(MediaConstants.GUANGDIANTONG_YOUMI + CommonConstants.PLUS  ...

  9. PHP代码中使用post参数上传大文件

    今天连续碰到了两个同事向我反应上传大文件(8M)失败的事情! 都是在PHP代码中通常使用post参数进行上传文件时,当文件的大小大于8M时,上传不能不成功. 首先,我想到了nginx的client_m ...

  10. R中导入excel乱码的解决办法

    本文操作系统环境为win10,使用Rstdio. 要说明windows下在使用Rstdio的时候,在使用xlsx包,导入excel表乱码的解决办法. 1.我们先安装xlsx包 install.pack ...