【CSS】背景基础知识

作者: 德育处主任 | 来源:发表于2017-11-27 12:14 被阅读81次
    92038-106.jpg

    添加背景图

    用 background-image 属性,在元素的背景中添加图形。
    background-image属性有一个值:url,后面跟着放在括号里的图形文件路径。
    路劲可以是绝对url,也可以是相对url。

    在使用相对url时,如:
    url(../images/bg.png)
    ../ 的作用是进入当前html文件的上一层目录。
    images/ 的作用是进入“images文件夹”。
    bg.png 指定要使用的图像文件。


    image.png

    HTML代码:
    <div class="div1"></div>

    CSS代码:

    .div1 {
      width: 900px;
      height: 500px;
      background-image: url(images/bg0002.jpg);
    }
    




    三种书写方式

    background-image: url(images/bg0002.jpg);
    /* 路劲不加引号 */

    background-image: url("images/bg0002.jpg");
    /* 路劲放在双引号内 */

    background-image: url('images/bg0002.jpg');
    /* 路劲放在单引号内 */

    以上三种书写方式都是有效的(我懒所以都不加引号)。

    Web浏览器主要支持三种图片格式:GIF,JPEG,PNG。
    这三种格式都有很好的压缩效果,因此在互联网中传输的速度更快。
    现在还有一种比较流行的格式:SVG。




    背景图的平铺方式

    使用 background-repeat 来控制背景图的平铺方式。

    分别有6个值可选:repeat,no-repeat,repeat-x,repeat-y,round,space。

    repeat
    默认值,会把图片从左到右,从上到下铺满整个背景。


    image.png
    background-image: url(images/quan.png);
    background-repeat: repeat;
    

    所用到的图片:

    image


    no-repeat

    图像只显示一次,不进行平铺。是一个非常常用的值。


    image.png
    background-image: url(images/quan.png);
    background-repeat: no-repeat;
    


    repeat-x

    沿着X轴横向平铺图像


    image.png
    background-image: url(images/quan.png);
    background-repeat: repeat-x;
    


    repeat-y

    沿着Y轴竖向平铺图像


    image.png
    background-image: url(images/quan.png);
    background-repeat: repeat-y;
    


    round

    round平铺图像的方式和repeat一样,不过不会裁剪图像。背景图不会被裁剪,而是被缩放,并排着一列列显示。为了做到这一点,浏览器会扭曲各个图像副本,因此会破坏图像的纵横比。


    image.png
    background-image: url(images/quan.png);
    background-repeat: round;
    

    由于我所用的背景图比较小,所以变形的效果不明显。
    这次用的是Firefox浏览器。


    space

    space平铺图像的方式与repeat一样,但是不会裁剪图像的上部或下部。也就是说,space选项始终显示完整的图像。因此,浏览器会在平铺的各个图像副本之间添加间隙。


    image.png
    background-image: url(images/quan.png);
    background-repeat: space;
    

    放大图片和repeat的图对比,可以看出使用space的图,圈圈之间是有一定空隙的。
    这次用的是Firefox浏览器。

    注意:在做这个笔记的时候(2017.11)round和space的兼容性都很差。并不是所有浏览器都兼容。




    定位背景图

    background-position

    用 background-position 属性控制图像位置。可以通过 关键字、具体的值、百分比 来控制背景的横向和纵向的起点。

    关键字
    横向:left,center,right。
    纵向:top,center,bottom。


    image.png

    HTML代码:
    <div class="div1"></div>

    CSS代码:

    .div1 {
        width: 900px;
        height: 500px;
        border: 1px solid #000;
        background-image: url(images/quan.png);
        background-repeat: no-repeat;
        background-position: center;
    }
    

    那个圈圈的背景图就会出现在div中央。因为 background-position 设置了 center。
    如果只写一个 center,浏览器会解析为 x轴 和 y轴 都用了center属性,所以纵横都是居中。

    在使用关键字时,定义横向和纵向的顺序不重要。如 background-position:top right; 和 background-position: right top; 都是一样的,浏览器会自动识别关键字。

    我习惯先写横向,再写纵向。

    image.png image.png image.png image.png image.png



    精确的值

    可以使用 像素 或 em 来设定背景图的位置。
    需要指定2个值,第一个值控制横向位置,第二个值控制纵向位置。
    (第一个值指明图像的左边与容器的左边之间的距离,第二个值指明图像的上边与容器的上边之间的距离。)




    image.png

    background-position: 5px 20px;

    值:坐负右正,上负下正。
    可以使用负值,把背景图移出左边或上边,隐藏部分图像。

    注意:使用像素或em尺寸时无法指定距离底边或右边的距离,如果要把背景图放在页面或目标元素的右下角,应该使用关键字(right bottom),或者使用百分比。




    百分比值

    使用百分比值,可以把背景图定位在与元素宽度成一定比例的某个点上。

    但我从开发中得到的一个经验是:如果能使用精确的值(像素或em)或者关键字来实现所需的效果,就尽量不要使用百分比。因为百分比值在定位背景图很难处理。


    background-position: 0% 0%;

    image.png

    background-position: 50% 50%;

    image.png

    background-position: 100% 100%;

    image.png


    看看下面我画的示意图就懂了


    image.png

    在(80% 20%)那里,背景图(80% 20%)的点和目标元素(80% 20%)的点是重合的,(50% 50%)和(100% 100%)也是这样。

    所以说,如果能使用精确的值(像素或em)或者关键字来实现所需的效果,就尽量不要使用百分比。因为百分比值在定位背景图很难处理。




    固定

    可以使用 background-attachment 把背景图固定在某个位置,意思就是 背景图不随屏幕滚动而滚动。

    background-attachment有2个属性:scroll 和 fixed 。

    scroll是默认值,即背景图与文本和页面中的其他内容一起滚动。

    fixed的作用是把被背景图固定在某个位置。比如想把页头部分固定在页面最顶端,不随页面滚动和滚动。


    image.png

    可以看到右侧滚动条不管怎么滚动,背景图依然是在左上角。

    CSS代码:

    background-image: url(images/logo0001.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    

    动图好像简书无法显示~~ 可以在我的订阅号查看这个笔记:Rabbit_svip





    定义背景图的起点与区域

    可以使用 background-origin 属性重新定义图像的起点。
    这个属性能告诉浏览器从元素的边框、内边距还是内容区域开始显示背景图。

    background-origin 有三个属性:border-box、padding
    -box、center-box。

    border-box:从边框的左上角开始放置背景图。


    image.png

    可以看出,背景图是在边框开始的。

    HTML代码:
    <div class="div1"></div>

    CSS代码:

    .div1 {
        width: 300px;
        height: 300px;
        border: 10px dashed #000;
        background-image: url(images/quan.png);
        background-origin: border-box;
    }
    





    padding-box:从内边距的左上角开始放置背景图。浏览器一般使用这种方式放置背景图。

    image.png
    第一个定义的背景图是在边框内部的左上角。

    HTML代码:
    <div class="div1"></div>

    CSS代码:

    .div1 {
        width: 300px;
        height: 300px;
        border: 10px dashed #000;
        background-image: url(images/quan.png);
        background-origin: padding-box;
    }
    



    content-box:从内容区域的左上角开始放置背景图。

    image.png
    HTML代码:
    <div class="div1">content</div>

    CSS代码:

    .div1 {
        width: 300px;
        height: 300px;
        border: 10px dashed #000;
        background-image: url(images/quan.png);
        background-origin: content-box;
    }
    



    background-clip 属性是 background-origin 的一个好搭档。

    background-clip 也是有3个值:border-box、padding-box、content-box。

    border-box:让背景图只显示在内容和边框的里面。只有边框有间隙时才可以注意到(如虚线)。浏览器一般以这种方式来显示。
    这里就不再举例了。



    padding-box:让背景图只在内边距区域和元素的内容里面显示。


    image.png

    这时边框上是没有任何背景图的。

    HTML代码:
    <div class="div1">content</div>

    CSS代码:

    .div1 {
        width: 300px;
        height: 300px;
        border: 10px dashed #000;
        background-image: url(images/quan.png);
        background-origin: padding-box;
        background-clip: padding-box;
    }
    

    content-box:让背景图只显示在内容区里面。


    image.png

    注意我的代码是有 10px 的 padding。

    HTML代码:
    <div class="div1">content</div>

    CSS代码:

    .div1 {
        width: 300px;
        height: 300px;
        border: 10px dashed #000;
        background-image: url(images/quan.png);
        background-origin: padding-box;
        background-clip: content-box;
    }
    

    我经常用的搭配方式:

    background-origin: content-box;
    background-clip: content-box;
    
    image.png

    让背景图完整的显示在内容区里面。

    注意:IE8及之前的版本都不支持 background-origin 和 background-clip 属性。




    缩放背景图

    通过 background-size 属性可以控制背景图的尺寸。

    background-size可以通过 精确的值、百分比、关键字 来控制。

    精确的值

    background-size: 100px 200px;
    第一个值控制 宽 , 第二个值控制 高。

    通过精确值控制,有可能会改变图片原有的长宽比例。

    精确值还可以结合另一种方法控制背景图。
    background-size: 100px auto;
    把背景图的宽度变成100px,高度随宽度自适应。

    即:只设置宽度或高度,另一个值设为 auto。
    根据高度或者宽度,浏览器会根据图像的纵横比自动设置另一个值,因此图像不会扭曲。



    百分比

    通过百分比控制宽度和高度,用法和精确的值是一样的。
    background-size: 100% 100%;
    会使背景图铺满整个载体容器。使用百分比来控制背景图大小,也很容易把图像扭曲。



    关键字

    contain、cover。

    contain:会根据元素的背景尺寸强制调整图像的尺寸,而且会保留图像的纵横比。

    使用contain时,浏览器会找到载体容器比较小的一条边。
    比如

    width: 100px;
    height: 200px;
    

    这时,浏览器就会找到100px,然后把图像的宽变成100px,高度自适应。


    image.png


    再如

    width:300px;
    height:150px;
    

    这时,浏览器会找到150px,然后把图像的高度变成150px,宽度自适应。


    image.png

    cover:强制让图像的宽度适应元素的宽度,让图像的高度适应元素的高度。
    cover和contain相反,cover会选择较大的那边做参考边。

    width: 100px;
    height: 200px;
    
    image.png

    因为height比width要大,所以背景图的高度和height设置的高度一样,背景图的宽度根据原图的比例进行放大。

    再如

    width:300px;
    height:150px;
    
    image.png

    此时width比height大,所以背景图的宽度等于width,背景图的高度随原图的比例进行放大。

    注意,contain 和 cover 都不会改变原图的比例。




    简写方式

    background: url(quan.png) center center / 50% no-repeat fixed #FFF;

    翻译一下:
    background: 文件路劲(url) 定位(position:center) / 大小(size:50%) 平铺方式(repeat) 固定方式(fixed) 背景色(#FFF);

    如果指定位置(background-position: center) 和 background-size 属性,二者中间要加上 / 符号。

    注意:IE8不支持 background-size、background-origin 和 background-clip 属性。如果在简写的 background 属性中设置这几个属性,IE8会忽略整个生命,不应用在任何背景属性。

    在简写的时候不是所有属性都要全部指定,而且通常不会全部指定。可以只指定一个属性,或者任意组合各个属性。

    简写时的其他注意事项:

    background-color: yellow;
    background: url(quan.png) no-repeat;
    

    这时,黄色背景是完全看不到的。因为在第二行代码中用了简写方式,浏览器遇到没有指定颜色的background属性(简写)时,会把 background-color 设为 transparent(透明),从而把上一行 background-color 属性覆盖掉。

    解决方法:

    background: url(quan.png) no-repeat;
    background-color: yellow;
    

    把“详细属性”放在“简写属性”后面,只会覆盖“简写属性”的部分值。所以在使用简写属性的时候,一定要注意书写顺序!



    HTML与CSS 目录:HTML与CSS

    上一篇:【CSS】着色与透明

    下一篇:【CSS】同时使用多个背景图

    相关文章

      网友评论

      本文标题:【CSS】背景基础知识

      本文链接:https://www.haomeiwen.com/subject/urwrbxtx.html