CSS背景图片属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ztt0918/article/details/70171260

本文详细介绍了CSS中背景图片的相关属性设置方法，包括背景颜色、背景图片的展示方式、重复方式、位置及大小等，通过具体示例展示了如何实现背景图片的精确控制。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 300px;
            border: 1px solid fuchsia;
            /*背景颜色*/
            background-color: antiquewhite;
            /*背景图片*/
            background-image: url("../img/Lenovo.jpg");
            /*背景图片的展示方式
            no-repeat  repeat-x repeat-y */
            background-repeat:no-repeat;


            /*背景图片位置

       偏移量 (两个参数)水平方向的偏移，垂直方向的偏移

                  （一个参数px）水平方向的偏移，垂直方向居中

                    center 正居中

                   center top中上

                    right top右上

                    等等*/

            background-position:center top;


            /*背景图片的大小

         图片填充整个背景(有失真) 100% 100%

          contain 宽高等比例缩放，直到宽或高填满父布局，可能出现图片填充不完整（不一定填满整个背景)             cover：宽高等比例缩放，知道较小的宽或高填满父布局，可能出现图片溢出（一定填满整个背景) */

            background-size: cover;


background-size: contain；

        }

    </style>
    <title>背景图片属性</title>
</head>
<body>
      <div></div>
</body>
</html>