当前位置：首页 > news >正文

【05】css 常用背景属性详解

news 2025/7/1 12:39:47

css 常用背景属性

- 一、背景颜色background-color
- 二、背景图片background-image
- 三、背景放置位置background-position
- 四、背景填充方式background-repeat
- 五、背景图片大小background-size
- css 常用背景属性总结

一、背景颜色background-color

<运行结果>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- css引入方式中的内部引用 -->
    <style>
      div {
        width: 200px;
        /* 设置宽度 */
        height: 100px;
        /* 设置高度 */
        background-color: green;
        /* 设置背景颜色为绿色 */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

二、背景图片background-image

background-image(url(图片地址))
【图片地址分为绝对路径(有盘符)和相对路径(./ …/ /)】
设置背景图片步骤：
步骤一：

步骤二：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 600px;
        /* 设置宽度 */
        height: 600px;
        /* 设置高度 */
        background-image: url(01.png);
        /* 设置背景为图片 */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

<运行结果>

三、背景放置位置background-position

background-position（left\center\right，top\center\bottom）

<运行结果，见图2>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        /* 设置宽度 */
        height: 300px;
        /* 设置高度 */
        background-image: url(01.png);
        /* 设置背景为图片 */
        background-position: right top;
        /* 设置背景图片的起始位置,默认是0% 0% */
        /* 方法一: */
        /* background-position: 50% 60%; */
        /* 方法二: */
        /* x:left  center  right */
        /* y:top   center  bottom */
        /* right top右上角为起始位置 */
        /* background-position: x y; 任意组合x,y*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

四、背景填充方式background-repeat

background-repeat（repeat-x水平，repteat-y垂直，no-repeat不重复填充）

repeat-x：水平重复填充

repteat-y：垂直重复填充

no-repeat：不重复填充

<运行结果，见图1>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 1000px;
        /* 设置宽度 */
        height: 1000px;
        /* 设置高度 */
        background-image: url(01.png);
        /* 设置背景为图片 */
        background-repeat: no-repeat;
         /* 设置背景图片不重复填充*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

五、背景图片大小background-size

cover：如果背景区域太大或太小,图像部分会被裁剪。

contain：如果背景区域太大或太小,图片不会被裁剪，会重复填充。
【使用background-repeat: no-repeat;可去掉图片重复填充)】

<运行结果，见图1>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 1000px;
        /* 设置宽度 */
        height: 300px;
        /* 设置高度 */
        background-image: url(01.png);
        /* 设置背景为图片 */
        background-size: contain;
        /* 设置背景图片大小*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>