css background 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /*1、background:背景颜色 背景图片 背景平铺 背景滚动 背景位置 
        2、背景色半透明：background:rgba(0,0,0,0.3)
        3、行内元素或行内块元素水平居中只要父元素设置text-align:center就可以
        4、块元素水平居中，该元素设置宽度width并设置margin:0 auto;
        box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, .3);//第一个阴影开始水平坐标x 第二个y坐标 第三个阴影模糊距离 第四个阴影大小 第五个阴影颜色 
        */
        
        .bg {
            height: 300px;
            background-image: url('./img/top-bg.jpg');
            background-repeat: no-repeat;
            /*图片从哪显示并位于容器元素什么位置若只有一个值则另一个表示居中（left就表示图片从左边靠近容器左边 垂直居中） */
            background-position: left;
            /*left top right center bottom 20px 一般第一个值是x坐标 第二个值是y坐标 */
            border: 1px solid;
            background-size: auto 184px;
            /*scroll:默认值背景图片随着容器内容滚动而滚动 fixed:容器内容滚动而背景图片不动*/
            background-attachment: fixed;
        }
        
        .icodiv {
            height: 60px;
            width: 120px;
            line-height: 60px;
            background-image: url('./img/mi-logo.png');
            background-repeat: no-repeat;
            background-position: left;
            background-size: 32px 32px;
            background-color: #ff6700;
            text-align: right;
        }
        
        .rgba {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, 0.3)
        }
        
        .div1 {
            width: 200px;
            height: 200px;
            border: 1px solid;
            text-align: center;
            vertical-align: middle;
            background-color: aqua;
            box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div class="bg"></div>
    <div class="icodiv">this is test</div>
    <div class="rgba">fdgrtet343543</div>
    <div class="div1">
        <span>444444444444443</span> </div>
</body>

</html>

 

posted @ 2020-12-25 14:50  howhy  阅读(60)  评论(0)    收藏  举报