html——背景Background讲解

最新推荐文章于 2024-04-12 10:32:25 发布

Happy Moment!

最新推荐文章于 2024-04-12 10:32:25 发布

阅读量3.4k

点赞数 15

文章标签： html 前端 css

本文链接：https://blog.csdn.net/2301_78753262/article/details/135018686

版权

🍎🥦html背景_background

🍒1.介绍背景属性
🥭2.使用背景属性

🍒1.介绍背景属性

背景属性介绍：

background-color	背景颜色
background-image	背景图片
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景滚动还是固定

🥭2.使用背景属性

设置背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性的使用</title>
    <!--设置背景颜色-----》background-color-->
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #00ffff;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果：
在这里插入图片描述设置一个宽高，然后使用background-color背景颜色选择自己喜欢的颜色。

设置背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性的使用</title>
    <!--设置背景图片------》background-image-->
    <style>
        body{
            background-image: url("../imges/index.jpg");
        }
    </style>
</head>
<body>
</body>
</html>

效果：
在这里插入图片描述 background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

设置平铺：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性的使用</title>
    <!--设置背景颜色-----》background-color-->
    <!--设置是否平铺-----》background-repeat
    repeat-x平铺x轴
    repeat-y平铺y轴
    no-repeat只显示一张图片-->
    <style>
        body{
            background-image: url("../imges/index.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

使用repeat-x效果图：

在这里插入图片描述使用repeat-y效果图：

在这里插入图片描述

使用no-repeat(常用这个)效果图：
在这里插入图片描述
设置背景位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性的使用</title>
    <!--设置背景位置：background-position----》背景位置
    常用：
    top  顶部
    bottem  底部
    center  中间
    -->
    <style>
        body{
            background-image: url("../imges/index.jpg");
            background-repeat: no-repeat;
            background-position: 200px 300px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果图：
在这里插入图片描述

设置背景是滚动还是固定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性的使用</title>
    <!--设置背景是滚动的还是固定的：background-attachment----》
    fixed  固定的
    -->
    <style>
        body{
            background-image: url("../imges/index.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
</body>
</html>