16.2背景——HTML

最新推荐文章于 2024-09-02 20:34:02 发布

StudiousTiger

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量101

点赞数

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/m0_45067620/article/details/107168791

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 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>
        .box1{
            width: 500px;
            height: 500px;
            background-color: chocolate;
            background-image: url(../Exercise（尚）/image/1.jpg);
            background-repeat: no-repeat;
            border: darkblue double 10px;
            /* 
              设置背景的范围：
                background-clip  背景修剪
                    可选值：
                        border-box  默认值，背景会出现在边框的下面
                        padding-box 背景只会出现在内容区和内边距，不会出现在边框下
                        content-box 背景只会出现在内容区

                background-origin 背景的起源（起点）
                    可选值：    
                        border-box   background-positionz从边框开始计算
                        padding-box  默认值，background-positionz从内边距开始计算
                        content-box  background-positionz从内容区开始计算
                
                background-size  设置图片的尺寸
                    第一个值表示width
                    第二个值表示height
                        -如果只写一个，表示width，那么height默认为auto
                    cover     图片的比例不变，将元素嵌满
                    contain   比例不变，图片在元素中完整显示

                background-attachment
                    -当设置overflow：scroll时，背景图片是否跟随元素移动
                    -可选值：
                        scroll 默认值，背景图片会跟着元素移动
                        fixed  背景图片固定在页面中，不会随着元素移动
             */
             background-clip: padding-box;
             /* background-clip: content-box;
             background-clip: border-box; */
             background-origin: padding-box;
             /* background-origin: border-box;
             background-origin: content-box; */


             /* 设置图片的尺寸，第一个值标志width,如果只写一个，那么第二个值auto，等比例设置 */
             background-size: 480px;
             /* background-size: 100%  100%; */
             /* background-size: 100%  auto; */
             /* background-size: cover; */
             /* background-size: contain; */
             

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

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

<!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> .box1{
复制链接

扫一扫

专栏目录