当前位置：首页 > 行业动态 > 正文

html背景图片加字

admin
行业动态
2025-04-28
1

文字

背景图片设置

通过CSS为HTML元素设置背景图片，常用background-image属性。

属性	作用	示例值
`background-image`	指定背景图片路径	`url('image.jpg')`
`background-size`	控制背景尺寸	`cover`（覆盖整个容器）
`background-repeat`	是否平铺背景	`no-repeat`（不平铺）
`background-position`	背景位置	`center center`（居中）

在背景上添加文字

创建容器：用<div>作为背景容器,设置宽高和背景。
添加文字：在容器内放置文字，通过color调整文字颜色,确保与背景对比清晰。
文字居中：使用text-align: center（水平居中）或line-height（垂直居中）。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">背景图片加字</title>
  <style>
    .bg-container {
      width: 100%;
      height: 500px;
      background-image: url('https://via.placeholder/1500x500');
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center; / 水平居中 /
      align-items: center;     / 垂直居中 /
    }
    .bg-text {
      color: #fff;             / 文字颜色 /
      font-size: 48px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5); / 阴影增强可读性 /
    }
  </style>
</head>
<body>
  <div class="bg-container">
    <div class="bg-text">欢迎访问我的网站</div>
  </div>
</body>
</html>