HTML——背景background

最新推荐文章于 2024-06-25 10:20:33 发布

Sushi_Law

最新推荐文章于 2024-06-25 10:20:33 发布

阅读量1.6k

点赞数 5

本文链接：https://blog.csdn.net/Sushi_Law/article/details/101043082

版权

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

设置背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            background: url("web/img/IMG_5344.JPG");
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

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

背景平铺

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

no-repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            background: url("web/img/达也.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

repeat-x：在x轴上平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            background: url("web/img/达也.jpg");
            background-repeat: repeat-x;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

repeat-y：在y轴上平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            background: url("web/img/达也.jpg");
            background-repeat: repeat-y;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

背景位置

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body {
            background: url("web/img/达也.jpg");
            background-repeat: no-repeat;
            background-color: greenyellow;
            background-position: 200px 300px;
        }
    </style>
</head>
<body>
</body>
</html>

100px描述的是x轴上的坐标，200px描述的是y轴上的坐标
在这里插入图片描述

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body {
            background: url("web/img/达也.jpg");
            background-repeat: no-repeat;
            background-color: greenyellow;
            background-size: 500px 500px;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述
2.通过设置cover使图片自适应屏幕，如有溢出部分则会被隐藏。（推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body {
            background: url("web/img/达也.jpg");
            background-repeat: no-repeat;
            background-color: greenyellow;
            background-size: cover;
        }
    </style>
</head>
<body>
</body>
</html>

在这里插入图片描述

Sushi_Law

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML——背景background

background-color背景颜色background-image背景图片background-repeat是否平铺background-position背景位置background-attachment背景滚动还是固定设置背景图片<!DOCTYPE html><html lang="en"><head&...
复制链接

扫一扫