HTML5背景图片的属性

最新推荐文章于 2024-07-16 08:30:00 发布

qq_55555550

最新推荐文章于 2024-07-16 08:30:00 发布

阅读量367

点赞数 3

分类专栏： HTML笔记文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_55555550/article/details/139688312

版权

HTML笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
            background-image: url(./a2.png);
            /* 设置图片背景默认会平铺图片 */
            /* 谁知成为不平铺 */
            background-repeat: no-repeat;
            /* background-repeat: repeat;
            /* 只平铺x轴 */
            /* background-repeat: repeat-x; */
            /* 只平铺y轴 */
            /* background-repeat: repeat-y;  */

            
            /* 设置背景图片的位置  left center right top bottom */
            /* background-position: top center; */
            /* background-position: center; */
            /* 也可以用坐标来表示  第一个数整数向右偏移 第二个数正数向下偏移 反之亦然*/
            background-position: 0px 0px;


            /* 背景图片尺寸 contain缩放到宽高有一边相等 cover 缩放到完全被覆盖 */
            /* background-size:cover; */
            background-size:contain;
            /* 也可以用比例来改变缩放大小  宽度100% */
            background-size: 100%;

            /* 背景图片不随着滚动条移动 */
            background-attachment:fixed;
            
        
            /*  */
        }
        p{
            width: 500px;
            height: 500px;
            /* 复合类型的背景设置  顺序随意 但是设置大小时前面加斜杠/ */
            background: url(./a2.png) blue no-repeat top center/80%;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <p>

    </p>
</body>
</html>