1.背景图片插入方法

2.背景图相关属性的设置

2.1 backgroundsize属性

backgroundsize:设置背景图大小,它的属性值有:covercontain和具体的宽度高度
(1)cover浏览器将使图像足够大,使它完全覆盖盒子区,同时仍然保持其高宽比。在这种情况下,有些图像可能会跳出盒子外,也就是说图像铺满了盒子,但是会有一部分剪切

 div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size: cover;

    }

代码展示效果
cover展示效果
(2)contain浏览器将使图像大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽比不同,则可能在图像的任何一边或顶部底部出现间隙

  div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size: contain;

    }

contain的展示效果
通过containcover展示效果可以明显看出来两者的差距
(3)设置具体值:根据自己需要设置具体的宽和高的值

 div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;

    }

在这里插入图片描述

2.2 backgroundrepeat属性

backgroundrepeat:设置背景图是否需要重复我们可以看一下上图,设置具体值以后,会默认图片重复平铺满整个盒子
属性取值有:repeat-x、repeatyrepeat、space、roundnorepeat
(1)repeat(默认值):重复铺满整个盒子

  div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: repeat;

    }

在这里插入图片描述
(2)repeat-x:x轴重复铺满盒子

div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: repeat-x;

    }

在这里插入图片描述
(3)repeat-yy轴铺满盒子

 div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: repeat-y;

    }

在这里插入图片描述
(4)space

 div{
        width: 1000px;
        height: 680px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: space;

    }

在这里插入图片描述
容器空间小于图片大小时:

div{
        width: 400px;
        height: 500px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: space;

    }

在这里插入图片描述
(5)round:

容器空间小于图片时:

 div{
        width: 400px;
        height: 500px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: round;

    }

在这里插入图片描述
容器大于图片大小时:

 div{
        width: 1000px;
        height: 700px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: round;

    }

(6)no-repeat:不重复

 div{
        width: 1000px;
        height: 700px;
        border: palevioletred 3px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-repeat: no-repeat;

    }

在这里插入图片描述

2.3 background-position属性

background-position:设置背景图的位置,它的属性取值leftrightcenterbottom、top、 < lengthpercentage>

2.4 background-origin属性

background-origin:规定了指定背景图片background-image 属性的原点位置的背景相对区域。它的属性取值有:borderboxpaddingboxcontentbox
(1)borderbox:背景图片的摆放以border区域参考

 div{
        width: 1000px;
        height: 700px;
        border: rgba(63, 214, 75, 0.411) 20px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-origin: border-box;
        padding: 50px;
        box-sizing: border-box;
    }

在这里插入图片描述
通过上述效果图可以看出来,边框下是有背景图的。
(2)paddingbox:背景图片的摆放以padding区域参考

 div{
        width: 1000px;
        height: 700px;
        border: rgba(63, 214, 75, 0.411) 20px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-origin: border-box;
        padding: 50px;
        box-sizing: padding-box;
    }

在这里插入图片描述
(3)content-box:背景图片的摆放以content区域参考

 div{
        width: 1000px;
        height: 700px;
        border: rgb(63, 214, 75) 20px solid;
        margin: auto;
        background-image: url(./imges/boluo.PNG);
        background-size:500px 400px;
        background-origin: border-box;
        padding: 50px;
        box-sizing: content-box;
    }

在这里插入图片描述

2.5 background-attachment属性

background-attachment定义了背景图片的附着点。它的属性值取值有:scrollfixedlocal
(1)scroll:使元素的背景在页面滚动滚动。如果滚动元素内容,则背景不会移动。实际上,背景被固定页面的相同位置,所以它会随着页面滚动而滚动。
(2)fixed: 使元素的背景固定视图端口上,这样当页面元素内容滚动时,它就不会滚动它将始终保持在屏幕上相同的位置
(3)local: 当你滚动元素时,背景也随之滚动。

原文地址:https://blog.csdn.net/weixin_43183219/article/details/122331135

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_30500.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注