背景部分案例学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_42938619/article/details/115672731

本文介绍了如何使用CSS的background属性来实现图标(icon)和背景图片的设置。案例1展示了如何设置背景图片作为icon，通过background-repeat、background-position和text-indent实现水平居中。案例2则演示了如何设置固定背景图片并保持垂直居中，确保在不同分辨率屏幕上良好显示。代码示例详细解释了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

依旧是黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩部分的内容，正好精通CSS 讲到了背景部分的知识。

在视频里面说，background 里面放图片主要用在两个方面，一个就是是用来做 icon，另外一个是用来做背景图片，案例也是根据着两个功能来实现的，一个做 icon，一个做背景图片。

案例1，用来做 icon

效果图：
案例1

难点也没有什么吧，主要就是：

页面左边放一个 icon
background-repeat 设置不重复
设置 background-position 让 icon固定在左侧，并且在盒子内部水平居中
line-height 和盒子的高度设置成一样的大小达成字体的水平居中

这个案例真的已经蛮老了，农药首页已经不用这种方式做这个效果了，图还是自己截的，需要自取：

snapshot

最后是代码实现部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        width: 118px;
        height: 40px;
        font-weight: 400;
        line-height: 40px;
        font-size: 14px;
        background-image: url('./img/title_sprite.png');
        background-repeat: no-repeat;
        background-position: left center;
        text-indent: 2em;
      }
    </style>
  </head>
  <body>
    <h3>成长守护平台</h3>
  </body>
</html>

案例2，背景图片

效果图：

background
这个背景图片是根据农药当时活动到首页下载的，真的很大，我就不放上来了。

这个背景图片的“难点”有以下几个：

背景图片位置做垂直居中，以便在分辨率不同的显示屏上达到较好的渲染效果
背景设置成固定fixed，这样在查看页面上的内容时，背景图片始终固定，不会移动

代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url('./img/37825646305951.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
        color: #fff;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
  <!-- 这里内容没什么用，主要就是确认图片固定不会移动 -->
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
    <p>aaaabbbbbb</p>
  </body>
</html>