一、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. 工作总结 错误 using 块缺少结束字符“}”。请确保此块内的所有“{”都有匹配的“}”字符,并且任何“}”都不会解释为标记。

    页面上 有两个 它会跟标签 匹配的     标准要在同一级别下 什么也不改变 只改变它们位置 就不报错了 总结 @using (Html.BeginForm()) { } 要根据标签位置 匹配  要放 ...

  2. hdu 4417,poj 2104 划分树(模版)归并树(模版)

    这次是彻底把划分树搞明确了,与此同一时候发现了模版的重要性.敲代码一个字符都不能错啊~~~ 划分树具体解释:点击打开链接 题意:求一组数列中随意区间不大于h的个数. 这个题的做法是用二分查询  求给定 ...

  3. 使用putty从linux主机上面往windows主机下面拷贝文件

    更新一下,把putty的包解压以后,想要在dos窗口中直接使用,必须把putty解压的文件的路径添加到环境变量中,这样使用起来就会非常简单了. 郁闷了好久,终于搞定了putty的上传下载文件命令psc ...

  4. 莫小安 CentOS7使用firewalld打开关闭防火墙与端口

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disab ...

  5. leetcode笔记:Add Binary

    一.题目描写叙述 Given two binary strings, return their sum (also a binary string). For example, a = "1 ...

  6. [译]GLUT教程(目录)

    http://www.lighthouse3d.com/tutorials/glut-tutorial/ GLUT是OpenGL Utility Toolkit的意思.作者Mark J. Kilgar ...

  7. datatable 常用参数

    DataTables(http://www.datatables.net/)应该是我到目前为止见过的,功能最强大的表格解决方案(当然,不计算其它整套框架中的table控件在内). 先把它主页上写的特性 ...

  8. 关于Java静态代码块、初始化块、构造函数的调用顺寻问题?

    public class ClassA { public ClassA(){ System.out.println("A 构造..."); } { System.out.print ...

  9. 如何落地全球最大 Kubernetes 生产集群

        鲍永成   京东基础架构部技术总监,   DevOps 标准核心编写专家   前言   JDOS 就是京东数据中心操作系统,随着数据中心规模不断的扩大,我们需要对数据中心做综合的考虑.所以一开 ...

  10. 使用Swoole加速Laravel(正式环境中)

    1 Laravel的速度瓶颈在哪? 1.1 已有的一些优化方法 1.1.1 laravel官方提供了一些优化laravel的优化方法 php artisan optimize php artisan ...