CSS入门篇16.背景样式（一）

最新推荐文章于 2025-03-19 20:34:28 发布

大白菜·

最新推荐文章于 2025-03-19 20:34:28 发布

阅读量224

点赞数

文章标签： css html javascript 前端 java

本文链接：https://blog.youkuaiyun.com/m0_62404129/article/details/126631123

版权

本文详细介绍了CSS中设置背景样式的相关属性，包括background-color用于设定背景颜色，background-image用于添加背景图片，通过no-repeat防止图片平铺，并利用background-position调整图片在元素内的位置。通过实例代码展示了如何实现背景图片的定位。

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

背景样式：

1: background-color 设置背景颜色

2:background-image来设置背景图片

- 语法：background-image:url(相对路径);

-可以同时为一个元素指定背景颜色和背景图片，

这样背景颜色将会作为背景图片的底色

-图片在元素中的位置

如果背景图片大于元素，默认会显示图片的左上角

如果背景图片和元素一样大，则会将背景图片全部显示

如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素

3:background-repeat用于设置背景图片的重复方式

可选值：

repeat，默认值，背景图片会双方向重复（平铺）

no-repeat ，背景图片不会重复，有多大就显示多大

repeat-x，背景图片沿水平方向重复

repeat-y，背景图片沿垂直方向重复

4:background-position可以调整背景图片在元素中的位置

背景图片默认是贴着元素的左上角显示

可选值：

该属性可以使用 top right left bottom center中的两个值

来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量，

第一个值是水平偏移量

- 如果指定的是一个正值，则图片会向右移动指定的像素

- 如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量

- 如果指定的是一个正值，则图片会向下移动指定的像素

- 如果指定的是一个负值，则图片会向上移动指定的像素

演示代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 300px;
        height: 300px;
        margin: 0 auto;
		background-color: goldenrod;
        /* 需求1:添加背景色 */
        /* 需求2:添加背景图片 */
		background-image: url(./img/gaitubao_小图_png.png);
        /* 需求3:虽然图小，但图片我只要一张*/
		background-repeat: no-repeat;
        /* 需求4:调整背景图片在元素中的位置 */
		background-position:50px 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

效果图为：