使用background-image属性通过url()引入图片路径可设置CSS背景图，如background-image: url(‘images/bg.jpg’)；路径支持相对、绝对及网络地址；常配合background-repeat、background-size、background-position和background-attachment优化显示效果；也可用background简写属性合并设置，如background: url(‘bg.jpg’) no-repeat center/cover。
在CSS中添加背景图使用 background-image 属性，最常用的方式是通过 url() 引入图片路径。下面详细介绍如何正确设置背景图。
基本语法
使用 background-image 添加背景图的格式如下：
background-image: url(‘图片路径’);
例如：
div {
background-image: url(‘images/bg.jpg’);
}
设置图片路径
路径可以是相对路径、绝对路径或网络地址：
立即学习“前端免费学习笔记（深入）”；
相对路径：相对于当前CSS文件的位置，如 url(../images/banner.png) 绝对路径：从网站根目录开始，如 url(/assets/img/photo.jpg) 网络地址：适用于在线图片，如 url(https://example.com/bg.jpg)
常用配合属性
单独使用 background-image 可能不够，通常还需设置以下属性来优化显示效果：
Word-As-Image for Semantic Typography
文字变形艺术字、文字变形象形字
62 查看详情 background-repeat：控制是否平铺，常用值 no-repeat background-size：设置背景图大小，如 cover（充满容器）或 100% 100%（拉伸填满） background-position：定位图片位置，如 center 居中显示 background-attachment：是否随滚动，如 fixed 实现视差效果
示例：
div {
background-image: url(‘bg.jpg’);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
简写形式
可以使用 background 简写属性一次性设置多个选项：
div {
background: url(‘bg.jpg’) no-repeat center/cover;
}
其中 center/cover 表示 position / size 的简写方式。
基本上就这些。只要路径正确，并合理设置重复、尺寸和位置，背景图就能正常显示。不复杂但容易忽略细节。
以上就是css背景图background-image如何添加的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1002863.html
微信扫一扫 
支付宝扫一扫 
