CSS把图片设置为背景(如何用css设置图片大小)

CSS把图片设置为背景 前言

推荐整理分享CSS把图片设置为背景(如何用css设置图片大小)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css把图片设置为背景图,css如何将图片设置为背景,css把图片设置为背景图,css把图片设置为背景图,css把图片设置为背景图,css把图片设置为背景颜色,css把图片设置为背景图,css把图片设置为透明背景,内容如对您有帮助，希望把文章链接给更多的朋友！

先列出几种常用的搭配，方便 CV，想了解具体的可以看后面详细介绍

第 1 组：刚好填充整个背景区域，不重复

background-image: url("~@/路径");background-size: cover;background-repeat: no-repeat;

第 2 组：从左上角开始，垂直水平重复填充

background-image: url("~@/路径");background-size: 30px auto; // 宽度 30px ，高度自适应一、图片路径：background-image

引入图片，注意路径前面需要加 ~ 符

background-image: url("~@/路径");二、图片大小：background-size

指定背景图片的大小，可以设置具体数值、百分比、cover、contain

具体数值：指定宽高百分比：按图片自身大小的百分比显示，100% 表示原图大小cover：宽高比不变，图片缩放为刚好覆盖背景区域的最小大小contain：宽高比不变，图片缩放为适合背景区域的最大大小background-size: 100px 100px; // 可以只设置一个数值，未设置的值默认为 autobackground-size: 100% 100%; // 可以只设置一个数值，未设置的值默认为 autobackground-size: cover;background-size: contain;三、是否重复：background-repeat

当图片宽高小于背景时，如何设置重复情况，默认 x轴、y轴都重复

repeat：默认值，x轴、y轴都重复repeat-x：仅x轴重复repeat-y：仅y轴重复no-repeat：不重复inherit：继承父元素的属性设置background-repeat: repeat; // 默认值，垂直水平都重复background-repeat: repeat-x; // 水平方向重复background-repeat: repeat-y; // 垂直方向重复background-repeat: no-repeat; // 不重复background-repeat: inherit; // 继承父元素四、起始位置：background-position

设置背景图片的起始位置，默认值为 0%、0%，即左上角

关键字：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom，这个太简单了，就不一一描述了，只需要注意一点，如果只写了一个关键字，另一个默认为 centerx% y%：指定百分比，左上角为0%、0%，右下角为100%、100%xpos ypos：指定像素，左上角为0px、0px，如果只写了一个，另一个默认为 50%inherit：继承父元素的属性设置background-position: center center;background-position: 50% 50%;background-position: 0px 0px;五、能否滚动：background-attachment

背景图片是否可以跟随页面滚动，默认值为 scroll，可以滚动

scroll：默认值，背景图片随着页面滚动fixed：背景图片不会随着页面滚动local：背景图片会随着元素内容滚动inherit：继承父元素的属性设置background-attachment: scroll; // 随页面滚动background-attachment: fixed; // 不滚动background-attachment: local; // 随内容滚动结束

其实还有其它属性，但是使用频率没那么高，就不一一介绍了，想了解的可以去 菜鸟教程 查看