HTML div 标签设置背景图片
div 设置背景图片`<div></div>`本身只有结构，背景图需要用 CSS 设置，有两种写法：
方式 1：行内样式（直接写在 div 标签上）
<div style="background-image: url('图片地址.jpg'); width:400px; height:300px; background-size:cover;">
</div>
注意：div 默认没有宽高，必须设置 width、height，不然背景图看不见
方式 2：外部 CSS（推荐）
<div class="bg-box"></div>
<style>
.bg-box{
/* 背景图片地址 */
background-image: url("图片地址.jpg");
width: 500px;
height: 350px;
/* 图片铺满容器 */
background-size: cover;
/* 图片居中 */
background-position: center;
/* 禁止图片重复平铺 */
background-repeat: no-repeat;
}
</style>CSS
.my-div{
width:500px;
height:350px;
background: linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)), url("bg.jpg");
background-size: cover;
}
常用参数说明
[*]`background-size: cover`：图片完整铺满 div，会裁剪部分图片
[*]`background-size: contain`：图片完整显示，不会裁剪，可能留有空白
[*]`background-position: center`：图片居中
[*]`background-repeat: no‑repeat`：关闭重复平铺
[*]`opacity:0.6`：背景图 60% 不透明。
[*]`rgba(255,255,255,0.4)`：白色，0.4 是颜色层透明度。
小坑提醒：
[*]url 里面图片路径写错会看不到图；
[*]div 不给宽高，高度为 0，背景完全看不到。
页:
[1]