分类:纯色背景    背景图像

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. Object类和@Data注解

    特别说明:若是有不对的地方欢迎指正 简要概述: Object类是java中所有类默认继承的一个类.下面介绍一下Object类中的一些重要的方法,面试中也是经常会被问到的.尤其是==和equals的区别 ...

  2. 灵魂拷问:Java 的 substring() 是如何工作的?

    在逛 programcreek 的时候,我发现了一些小而精悍的主题.比如说:Java 的 substring() 方法是如何工作的?像这类灵魂拷问的主题,非常值得深入地研究一下. 另外,我想要告诉大家 ...

  3. 洛谷 题解 P1684 考验

    本蒟蒻又来发题解啦! 这个题的正解应该是贪心 直接找题目的关键: 韵脚只可能是 "AABB", "ABAB", "ABBA" 和" ...

  4. luogu P2135 方块消除 |dp

    题目描述 Jimmy最近迷上了一款叫做方块消除的游戏.游戏规则如下:n个带颜色方格排成一列,相同颜色的方块连成一个区域(如果两个相邻方块颜色相同,则这两个方块属于同一区域).为简化题目,将连起来的同一 ...

  5. HDU-1698-----Just Hook

    In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...

  6. (全国多校重现赛一)E-FFF at Valentine

    At Valentine's eve, Shylock and Lucar were enjoying their time as any other couples. Suddenly, LSH, ...

  7. Python文章相关性分析---金庸武侠小说分析-2018.1.16

    最近常听同事提及相关性分析,正巧看到这个google的开源库,并把相关操作与调试结果记录下来. 输出结果: 比较有意思的巧合是黄蓉使出打狗棒,郭靖就用了降龙十八掌,再后测试了名词的解析. 小说集可以百 ...

  8. 解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  9. MYSQL-JDBC批量新增-更新-删除

    目录 1 概述 2 开启MYSQL服务端日志 3 深入MYSQL/JDBC批量插入 3.1 从一个例子出发 3.2 JDBC的批量插入操作 3.3 两个常被忽略的问题 3.5 误区 4 MYSQL/J ...

  10. lnmp1.2支持ThinkPhp pathinfo及rewrite

    一.pathinfo支持方法 1.2版本系统已经自动生成了一个pathinfo的配置文件,但实测不可用,所以我们先找打这个文件并修改其内容,文件路径为:/usr/local/nginx/pathinf ...