给html标签添加背景图片的代码

吾爱分享网

2025-4-19

在HTML中，你可以通过CSS为元素添加背景图片。以下是几种常见的方法：

给html标签添加背景图片的代码

1. 使用内联样式

<div style="background-image: url('image.jpg'); background-size: cover; height: 300px;">
  <!-- 内容 -->
</div>

2. 使用内部样式表

<style>
  .background-div {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
  }
</style>

<div class="background-div">
  <!-- 内容 -->
</div>

3. 使用外部CSS文件

<!-- 在HTML文件中 -->
<link rel="stylesheet" href="styles.css">

<div class="background-section">
  <!-- 内容 -->
</div>

/* 在styles.css文件中 */
.background-section {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  height: 500px;
}

常用背景属性说明

background-image: url('path/to/image.jpg'); - 设置背景图片
background-repeat: no-repeat/repeat/repeat-x/repeat-y; - 控制图片重复方式
background-size: cover/contain/具体尺寸; - 控制图片大小
- cover - 完全覆盖元素，可能裁剪图片
- contain - 完整显示图片，可能留白
background-position: center/top left/50% 50%; - 控制图片位置
background-attachment: fixed/scroll; - 控制图片是否随内容滚动

为整个页面设置背景

<style>
  body {
    background-image: url('background.jpg');
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    height: 100vh;
  }
</style>