CSS设置图像

最新推荐文章于 2025-12-26 15:15:00 发布

原创最新推荐文章于 2025-12-26 15:15:00 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端专栏收录该内容

31 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSImg</title>
    <style>
        div {
            width: 1100px;
            height: 900px;
            color: pink;

            background-image: url(./Img/Tzuyu.jpg);
            background-repeat: no-repeat;             /*关闭平铺*/
            /*background-repeat: repeat-x;              水平平铺
            background-repeat: repeat-y;                竖直平铺*/
            background-size: contain;                 /*图像全展示，不过容器可能会留下空白*/
            /* background-size: 100% 100%;              第一个参数是width，第二个参数是height
               background-size: cover;                  容器全覆盖，不过图像可能会缺失*/
            background-attachment: fixed;             /*固定图像位置*/
            /* background-position: center center;      位置属性同理，第一个参数为水平方向，第二个参数为竖直方向
                                                        两个方向各有三个参数，分别为left、center、right和
                                                        top、center、bottom*/
        }
    </style>
</head>
<body>
    <div>Hello World!</div>
</body>
</html>