背景

作者: 沙子_32c6 | 来源:发表于2018-09-11 22:35 被阅读0次

    设置背景样式

    用background-image:url(图片相对路径);设置背景图片
    如果背景图片大于元素,默认会显示图片的左上角
    如果背景图片和元素一样大,则会将背景图片全部显示
    如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素

    可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色
    一般情况下设置背景图片时都会同时指定一个背景颜色

    background-repeat用于设置背景图片的重复方式
    可选值:
    repeat,默认值,背景图片会双方向重复(平铺)
    no-repeat,背景图片不会重复,有多大就显示多大
    repeat-x, 背景图片沿水平方向重复
    repeat-y,背景图片沿垂直方向重复

    背景固定

            <style type="text/css">
        body{
            height: 5000px;
            background-image: url(img/2.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
        </style>
    

    当背景图片的background-attachment设置为fixed时,背景图片的定位永远相对于浏览器的窗口

    效果图:


    选区_039.png

    简写背景属性

    body{
    height: 5000px;
    设置一个背景颜色
    background-color: #bfa;
    设置一个背景图片
    background-image: url(img/3.png);
    设置背景不重复
    background-repeat: no-repeat;
    设置背景图片的位置
    background-position: center center;
    设置背景图片不随滚动条滚动
    background-attachment: fixed;
    background-color: #bfa;

    background
    通过该属性可以同时设置所有背景相关的样式
    没有顺序的要求,谁在前睡在后都行
    也没有数量的要求,不写的样式就使用默认值
    background: color url(图片相对路径) center center no-repeat fixed;

    相关文章

      网友评论

          本文标题:背景

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