分类:纯色背景    背景图像

1、背景颜色

    background-color : 任意合法的颜色 和 transparent  

2、背景图像

    background-image : url(想要加载的图片)

3、背景图片平铺

    background-repeat :

         repeat:默认值水平垂直方向都平铺

         repeat-x : 水平方向平铺

           repeat-y : 垂直方向平铺

           no-repeat : 默认不平铺      

 4、背景图片的尺寸

      background-size : value1    value2     宽度    高度    (单位px)

               value%   value%    宽度    高度    (单位%)

               cover :全覆盖  将背景图等比放大知道背景图完全覆盖到元素的所有区域

               contain : 包含  将背景图等比放大,直到下边或者右边有一个边缘碰到元素为止

  5、背景图片固定

      background-attachment : fixed;(固定)

                   scorll(滚动)

  6、背景定位

      改变背景图片在元素中的默认位置

      background-position : 注意对于这个Firefox和Opera,background-attachment必须设置为“fixed”(固定)

          left(top,center,bottom)

          right(top,center,bottom)

          center(top,center,bottom)

          x%    y%(注意第一个值是水平位置,第二个值是垂直位置;左上角是0%    0% ,右下角是100%   100%,如果只指定了一个值其他值是50%,默认为0%    0%)

          xpos  ypos(第一个值是水平位置,第二个值是垂直位置;单位可以是像素也可以是其他css单位,如果只指定了一个值其他值是50%;可以使用%和positions)

          inherit : 指定background-position属性设置应该从父元素继承

  7、雪碧图、精灵图

      作用:将一些小的背景图合并到大的背景中去,以便实现减少服务器的请求

      步骤:1>、我们根据图像的大小创建一个元素

          2>、将多张图片合并为一张图片,下载全部所需的资源,只需一次请求,减少链接的消耗

          

css里的背景属性有哪些,如何去使用哪些属性的更多相关文章

  1. [1.1W字] 复习: CSS 9个背景属性&6种渐变函数, 学会可以手写实现AI中强大的"任意渐变"! #Archives009

    Title/ CSS Background&Gradient完全指南 #Archives009 序: 关于 background 属性, 了解点CSS的人总会知道个大概. 但是你肯定多半还有点 ...

  2. css中background背景属性概

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

  3. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  4. CSS里的pointer-events属性

    现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...

  5. 使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  6. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  7. CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图)

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  8. H5_0026:使用CSS里的user-select属性控制用户在页面上选中的内容

    CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字.图片等,也就是,让页面内容不可选.也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字.还包括文本里的图片.视频等其它 ...

  9. CSS 常用样式 – 背景属性

    一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰 加载区域:在 border 及以内加载背景颜色 属性值:颜色名.颜色值 & ...

随机推荐

  1. mongodb的部署

    集群mongdb https://www.cnblogs.com/littleatp/p/8563273.html https://www.mongodb.com/download-center/co ...

  2. WARNING: Your kernel does not support swap limit capabilities. Limitation discarded.

    利用vSphere调整各台虚拟机后,重新启动mesos,让其启动docker,并为每个container分配cpu和mem,但每次都有一个TASK_LOST. 查看mesos slave的log,发现 ...

  3. zabbix分布式监控服务 安装与配置

    zabbix安装与配置   一.什么是zabbix及优缺点(对比cacti和nagios) Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存 ...

  4. bundle 的生成和使用

    一.bundle 的生成 1.打开XCode,创建iOS版用的bundle资源包,有两种方式:第一种直接将工作,open in  finder.在目录中直接新建文件夹,文件夹以bundle格式.文件夹 ...

  5. Java修炼——内部类详解

    内部类详解 定义:将一个类定义在另一个类的内部,该类就称为内部类 类中定义的内部类特点: 内部类作为外部类的成员,可以直接访问外部类的成员 (包括 private 成员),反之则不行. 内部类做为外部 ...

  6. ZOJ2770-Burn The Linked Camp(火烧连营Orz 差分约束-线性约束+最长路(OR反向最短路))

    It is well known that, in the period of The Three Empires, Liu Bei, the emperor of the Shu Empire, w ...

  7. 一位资深程序员面试Python工程师的岗位心得和历程【新手必须】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:程序员阿牛说一些面试的心得体会: 1.简历制作我做了两份简历,用两个手机 ...

  8. django学习03-模版

    新手做的笔记,很可能会有理解错误的地方.欢迎拍砖. 在polls/views.py中增加下面内容,完善功能. def detail(request, question_id): return Http ...

  9. 【ES】338- ECMAScirpt 2019 新特性汇总

    点击上方"前端自习课"关注,学习起来~ 最近在做的一个活动,大家都可以参与: 送 1600 元超大现金红包啦,走过路过不要错过哦 ~ 最近 ECMAScript2019,最新提案完 ...

  10. springboot 使用阿里云短信服务发送验证码

    一.申请阿里云短信服务 1.申请签名 2.申请模板 3.创建accesskey(鼠标悬停在右上角头像) 二.代码实现 1.springboot引入maven依赖 <dependency> ...