background背景

最新推荐文章于 2024-01-15 15:49:19 发布

闲人不梦卿

最新推荐文章于 2024-01-15 15:49:19 发布

阅读量74

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/atu1111/article/details/117516282

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

background背景

1.语法

在这里插入图片描述

2.代码案例

<!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>
        body {
            height: 3000px;
        }
        
        .bgc {
            width: 1000px;
            height: 1000px;
            /* 
            background-color: pink;
            background-image: url('img/l.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left top; */
            background: pink url('img/l.jpg') no-repeat left top fixed;
            /* 
                background: pink url('img/l.jpg') no-repeat left top fixed;等价上面分开些的属性
             */
            /* background-size: auto; */
            /* background-size: 100px 50px; */
            /* background-size: 10%; */
            /* background-size: cover; */
            /* background-size: contain; */
        }
    </style>
</head>

<body>
    <!-- 
        1 background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
        2 background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
        3 background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
        4 background-size:cover;/* 将背景图片等比缩放填满整个容器 */
        5 background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
     -->
    <div class="bgc">

    </div>
</body>

</html>

闲人不梦卿

关注

0
点赞
踩
0

收藏

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

background背景1.语法2.代码案例<!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>
复制链接

扫一扫