css常用样式背景background如何使用

css背景background属性常用于定义HTML的背景，background简写属性作用是将背景属性设置在一个声明中，background背景属性常见为以下这些：.background-color代表背景颜色 .background-image代表背景图像 .background-repeat 代表背景图像水平或者垂直平铺 .background-attachment代表背景图像是否固定或者随着页面的其余部分滚动 .background-position代表设置背景图像的起始位置在这些背景效果中background-color属性定义了元素的背景颜色,颜色值通常以以下方式定义:十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"颜色名称 - 如："red" 具体用下面的代码展示说明下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS背景background</title>

    <style type="text/css">

    /*background-color:定义元素背景色*/

    div{

        /*颜色值通常以以下方式定义:十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)"颜色名称 - 如："red"*/

        color: #f90;

        color: rgb(red, green, blue);

        color: royalblue;

        color: rgb(255,255,255);

        background-color: blueviolet;

    }

    /*background-image:定义元素背景图像*/

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

    }

    /*background-repeat:代表背景图像水平或者垂直平铺*/

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

        background-repeat: repeat-x;/*图像水平平铺*/

        background-repeat: repeat-Y;/*图像垂直平铺*/

        background-repeat: no-repeat;/*图像拒绝平铺*/

    }

    /*background-position代表设置背景图像的起始位置*/

    /* 提示：为 background-position 属性提供值有很多方法。首先，

可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 */

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

        background-position:left top;

    }

    /* background-attachment代表背景图像是否固定或者随着页面的其余部分滚动 */

    body{

        background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");

        background-repeat: no-repeat;

        background-position:800px 1000px;/*图像将在元素内边距向右移动800px，向下移动1000px*/

        background-attachment: fixed;

    }

    /* background背景简写 */

    /* div{

        background: color image repeat attachment position;

    } */

    </style>

</head>

<body>

    <div>如何在页面滚动齿轮的时候实现背景图不动，选择 background-attachmn:fixed</div>

    <!-- 100个换行符 br*100敲下enter键 -->

</body>

</html>

巴特西

css常用样式背景background如何使用

最新文章

热门文章