学习微信小程序之css19之背景设置

顺晟科技

2022-09-13 14:32:53

设置背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景设置</title>
    <style>
        .header{
            background-color: teal;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /*设置背景图片,默认只要位置够,无限重复*/
            background-image: url("img/nav_icon_01.png");
            /*让背景图不重复显示,只显示一次*/
            background-repeat: no-repeat;
        }

        .warp1{
            background-color: yellow;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /*设置背景图片,默认只要位置够,无限重复*/
            background-image: url("img/nav_icon_01.png");
            /*让背景图在x方向上铺满*/
            background-repeat: repeat-x;
        }
        .warp2{
            background-color: red;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        /*设置背景图片,默认只要位置够,无限重复*/
        background-image: url("img/nav_icon_01.png");
        /*让背景图在y方向上铺满*/
        background-repeat: repeat-y;
        }
        .warp3{
            background-color: green;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /*设置背景图片,默认只要位置够,无限重复*/
            background-image: url("img/nav_icon_01.png");
            /*让背景图在x,y方向上铺满*/
            background-repeat: repeat;
        }
        .warp4{
            background-color: blue;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            /*设置背景图片,默认只要位置够,无限重复*/
            background-image: url("img/nav_icon_01.png");
            /*让背景图在x,y方向上铺满,默认效果*/
            /*background-repeat: repeat-y;*/
        }
    </style>
</head>
<body>
<div class="header">

</div>
<div class="warp1"></div>

<div class="warp2"></div>
<div class="warp3"></div>
<div class="warp4"></div>
</body>
</html>

上一篇：如何编写轻量级 CSS 框架下一篇：【转】在html中引入CSS的方法

网站建设

Css

学习微信小程序之css19之背景设置

设置背景图