HTML背景图片的设置

html 12 月前 0 3

本文介绍: 背景图片的设置，背景图片大小、位置、是否重复以及附着点的问题

1.背景图片的插入 方法

行内样式插入背景图：< div style=“background–image: url(./img es/b oluo.PNG);”&g t;
在css 样式表中引入背景图
注意：设置背景图片的元素一定要有具体的宽度和高度，否则会导致背景图片无法显示

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

2.1 background–size 属性

background–size：设置背景图大小，它的属性值有：co v e r、contain和具体的宽度和高度值
（1）co v e r：浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外，也就是说图像铺满了盒子，但是会有一部分被剪切了

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

    }

代码展示效果：
cover展示效果
（2）c on t a in：浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

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

    }

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

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

    }

在这里插入图片描述

2.2 bac kg round–re peat 属性

bac kground–re peat：设置背景图片是否需要重复，我们可以看一下上图，设置具体值以后，会默认将图片重复平铺满整个盒子。
该属性取值有：re peat-x、re peat–y、repeat、sp ace、round、no–repeat
（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-y：y轴铺满盒子

 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）sp ace：

容器空间小于图片时，背景图不会产生缩放，会被裁切
容器空间大于图片时，在不缩放的前提下尽可能多的重复图片
当容器空间大于图片时：

 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：设置背景图的位置，它的属性取值有left、right、center、bottom、top、 < length–per centage>

2.4 background-origin属性

background-origin：规定了指定背景图片background-image 属性的原点位置的背景相对区域。它的属性取值有：border–box、padding–box、content–box
（1）border–box：背景图片的摆放以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）padding–box：背景图片的摆放以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：定义了背景图片的附着点。它的属性值取值有：scroll、fixed、local。
（1）scroll：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
（2）fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动它将始终保持在屏幕上相同的位置。
（3）local: 当你滚动元素时，背景也随之滚动。

原文地址:https://blog.csdn.net/weixin _43183219/art icle/details/122331135

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

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

background 背景图背景图片

相关文章

HTML+CSS：全景轮播

html 10 月前 5

HTML+CSS：3D轮播卡片

HTML+CSS：3D轮播卡片

html 10 月前 3

ppt背景图片怎么设置？让你的演示更加出彩！

ppt背景图片怎么设置？让你的演示更加出彩！

互联网 10 月前 2

css3背景与渐变

css 10 月前 6

编程笔记 html5&css&js 038 CSS背景

编程笔记 html5&css&js 038 CSS背景

html 10 月前 4

Alist网盘美化常用代码V3专用

Alist网盘美化常用代码V3专用

互联网 12 月前 4

html,css,js速成

html 10 月前 4

HTML元素的操作

html 10 月前 4

发表回复取消回复