HTML div 标签设置背景图片

风萧

div 设置背景图片
`<div></div>`本身只有结构，背景图需要用 CSS 设置，有两种写法：
方式 1：行内样式（直接写在 div 标签上）

1. <div style="background-image: url('图片地址.jpg'); width:400px; height:300px; background-size:cover;">
   
2. </div>

复制代码

注意：div 默认没有宽高，必须设置 width、height，不然背景图看不见

方式 2：外部 CSS（推荐）

1. <div class="bg-box"></div>
   
2. <style>
   
3. .bg-box{
   
4.     /* 背景图片地址 */
   
5.     background-image: url("图片地址.jpg");
   
6.     width: 500px;
   
7.     height: 350px;
   
8.     /* 图片铺满容器 */
   
9.     background-size: cover;
   
10.     /* 图片居中 */
    
11.     background-position: center;
    
12.     /* 禁止图片重复平铺 */
    
13.     background-repeat: no-repeat;
    
14. }
    
15. </style>

复制代码

CSS

1. .my-div{
   
2.   width:500px;
   
3.   height:350px;
   
4.   background: linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)), url("bg.jpg");
   
5.   background-size: cover;
   
6. }

复制代码

---

常用参数说明

• `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，背景完全看不到。