CSS背景

落日映苍穹つ 2021-12-10 23:51 352阅读 0赞

## 1.设置页面的背景颜色 ##

body{
        
            margin:0px;
            background-color:lightskyblue;
        }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我的CSS</title>
    </head>
    <body>
    <h1>我的CSS web页！</h1>
    <p>Hello World！</p>
    </body>
    </html>

## 2.设置不同元素的背景颜色 ##

1 h1{
    2         background-color:royalblue;
    3     }
    4     div{
    5         background-color:silver;
    6     }
    7     p{
    8         background-color:honeydew;
    9     }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我的CSS</title>
        
    </head>
    <body>
    <h1>CSS background-color实例！</h1>
    <div>
    该本文插入在div元素中。
    <p class="green">该段落有自己的背景颜色。</p>
    我们任然在同一个div中。
    </div>
    </body>
    </html>

## 3.设置一个图像最为页面的背景 ##

div {
        
       margin: 0px;
       width: 200px;
       height: 200px;
       background-image: url('fun.jpg');
    }
    div h1 {
        
        text-align: center;
    }

## 4.如何在水平方向重复背景图像 ##

div {
        
        background-image: url('fun.jpg');
        background-repeat: no-repeat;
    }

<body>
    <div>
        <h1>Hello World!</h1>
    </div>
    </body>

## 5.如何定位背景图像 ##

div {
        
        background-image: url('fun.jpg');
        background-repeat: no-repeat;
        margin-right: 200px;
    }

<body>
    <div>
        <h1>Hello World!</h1>
    </div>
    </body>

## 6.一个固定的背景图片（这个图片不会随着页面的其余部分滚动） ##

div {
        
        background-image: url("fun.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        right: 2000px;
    }

<body>
    <div>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
        <p>背景图片是固定的。尝试向下滚动页面</p>
    </div>
    </body>

## 7.声明背景属性 ##

body{
        
            background: url("fun.jpg") no-repeat right top;
            margin-right: 200px;
    }

<body>
        <h1>Hello World!</h1>
        <p>背景图片只显示一次但它位置离文本比较远</p>
        <p>在这个例子中我们添加了一个右边距，所以背景图像</p>
    </body>

## 8.高级的背景例子 ##

<body>
        <div class="contains">
            <div class="content">
                <h1>Hello World!</h1>
                <p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
            </div>
        </div>
    </body>

body {
        
        margin-left: 200px;
        background-image: url("fun.jpg");
    }
    div.contains {
        
        text-align: center;
    }
    div.contains div.content {
        
        border: 1px solide skyblue;
        margin-right: auto;
        margin-top: auto;
        width: 75%;
        text-align: left;
        background-color: darkorange;
        padding: 8px;
    }

转载于:https://www.cnblogs.com/Tony98/p/10958001.html