zoukankan      html  css  js  c++  java
  • CSS背景属性汇总

    background-color

    说明:该属性为元素设置背景色,填充区域包括内容区,内边距,边框。默认值transparent表示透明,属性值可以是颜色名字(如red),可以是十六进制表示(如#ff0000),可以用RGB表示如(rgb(255, 0, 0)),可以是关键字inherit继承父元素的背景色。

    background-attachment

    body {
      background-image: url('a.jpg');
      background-attachment: fixed;
    }
    

    说明:该属性规定背景图片是否随着页面滚动。默认值scroll表示背景图会随着页面滚动,fixed表示不随页面的滚动而滚动,inherit表示继承父元素的值。

    background-image

    body {
      background-image: url('a.jpg');
    }
    

    说明:定义元素的背景图,背景图的大小占据元素的内容区,内边距和边框。图片默认从左上角开始,如果图片太小就会自动在水平和垂直方向上平铺,直到占据整个元素的区域。none是默认值,url指定图像路径,inherit继承父元素的值。

    background-position

    说明:定义背景图片的起始位置。属性值可以是以下关键字:
    top left
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    

    关键字的第一个值表示背景图在垂直方向上的位置,第二个值表示背景图在水平方向上的位置,第二个值默认是center

    属性值可以用百分比表示,例如background-position: 50% 30%;第一个表示水平方向上的距离(图片左上角距离左边的距离),第二个肯定是垂直方向上的距离(图片左上角距离顶部的距离),切记它和使用关键字所代表的意思是相反的。0% 0%相当于关键字top left, 50% 50%相当于center, 100% 100%相当于bottom right。百分比是依据图像在容器中的空白距离划分的,值不仅可以为正值,当值为负数时图片相当于向上和向左移动的距离。

    属性值当然也可是像素,例如background-position: 50px 30px;具体含义同百分比相同,只是采用了绝对距离。

    我用下面这个图片实现了一个精灵图,它的主要原理就是背景图片定位:


    例5就是最终的效果

    background-repeat

    body {
      background-image: url('a.jpg');
      background-position: no-repeat;
    }
    

    说明:背景图像的平铺模式。repeat是默认值,即图像会在水平和垂直方向上平铺。repeat-x图像只在水平方向上屏幕。repeat-y图像只在垂直方向上平铺。no-repeat图像不进行平铺,最常用的一个值。inherit继承父元素的值。

    background-clip

    说明:规定背景绘制的区域。无论是背景色还是背景图片上面已介绍过,背景区域包括内容区,内边距,边框;该属性可以改变背景区域,默认值border-box表示背景区域包括内容区,内边距和边框。padding-box背景区包括内容区和内边距。content-box背景区域只包括内容区域。

    background-origin

    说明:规定background-position属性相对于什么位置定位。上面的background-position例子中可以看到,边框是没有背景图的,这是因为background-origin的默认值是padding-box,即背景图是相对于内边距来定位的,border-box表示背景图相对于边框来定位,content-box背景图相对于内容区来定位。

    background-size

    说明:规定背景图片的大小。默认值auto表示自身大小。属性值的单位可以是像素,例如background-size: 100px 100px,第一个值宽度,第二个是高度,当只设置一个值时,第二个值默认是auto,浏览器根据宽度自动计算出高度。单位可以是百分比,百分比是相对于父容器的宽高,第一个值设置宽度,第二个设置高度,当只有一个值时第二个值默认为auto。属性值cover表示覆盖整个容器的区域,图片太小就会等比例拉伸,太大就会把多余部分裁减掉,这就导致图像的某些部分可能无法显示在容器中。contain表示图像在容器内等比例缩放,直到宽度或者高度填满容器为止,这个值还是挺常用的。

    background

    说明:这是一个简写属性,它是以下属性的简写:

    background-color
    background-image
    background-position
    background-size
    background-repeat
    background-origin
    background-clip
    background-attachment
    
    

    官方没有强制要求属性顺序,但是我们通常按照上面的排序写,例如:background: #ff0000 url('a.jpg' center / 20px no-repeat),使用简写是一个很好的习惯。

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    Python的第一个程序
    Spring Boot 之Web开发
    JAVA简介及特性
    Spring Boot与Docker
    ls命令之通配符的使用
    [导入]ASP.NET常用函数
    [导入]再见号称中国最美的女人
    [导入]www.reactos.org一网友介绍的方向为“自己写操作系统的站点”
    [导入] Gmail Chat (Gmail 里的聊天功能)
    [导入]此篇写给城里普通收入的年轻人~~~
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356371.html
Copyright © 2011-2022 走看看