CSS背景

时间：2019-05-31 23:32:16 阅读：99 评论：0 收藏：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;
}

<!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>
<div>
    <h1>Hello World!</h1>
</div>
</body>
</html>

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;
}

CSS背景

原文：https://www.cnblogs.com/Tony98/p/10958001.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)