关于background-size、background-repeat、background-position的三种属性详解

介绍:

  • background-size用于设置背景图片的尺寸,可以是具体长度值、百分比或cover、contain等关键字;
  • background-repeat用于指定背景图片的平铺方式,包括repeat、repeat-x、repeat-y和no-repeat;
  • background-position用于设置背景图片的起始位置,可以使用关键字(如top、center)或具体的长度值。这三种属性共同用于控制背景图片的显示效果,通过灵活组合可以实现各种各样的视觉效果。

起始代码:

xml 复制代码
<!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设置宽高和红色边框便于观察
        div{
            width: 600px;
            height: 300px;
            border: 5px solid red;
        }
        .example {
            background-image: url('../image/赛博冷色.png');        
        }
    </style>
</head>
<body>
    <div class="example"></div>
</body>
</html>

起始结果:

我们可以看到由于div设置了宽高属性所以背景图片只显示了左上角。

1. background-size

可能的取值:

  • auto:默认值,保持图片原始尺寸。
  • <length>:指定图片的宽度和高度,可以是像素值或百分比。
  • cover:等比例缩放图片,使其完全覆盖容器,并保持图片的纵横比。
  • contain:等比例缩放图片,使其完全包含在容器内,并保持图片的纵横比。

特点和实例:

  • auto:保持图片原始尺寸,不进行缩放。
arduino 复制代码
.example {
  background-size: auto;
}

结果:背景图片只显示了左上角。

  • <length>:设置图片的宽度和高度,可以使用像素值或百分比。
arduino 复制代码
.example {
  background-size: 200px 100px;
}

结果:因为给背景图设置了200px 100px的宽高,所以背景图会自己填充剩下的div空间

  • cover:等比例缩放图片,使其完全覆盖容器,并保持图片的纵横比。
arduino 复制代码
.example {
  background-size: cover;
}

结果:背景图完全覆盖容器,并保持图片的纵横比。

  • contain:等比例缩放图片,使其完全包含在容器内,并保持图片的纵横比。
arduino 复制代码
.example {
  background-size: contain;
}

结果:因为等比例填充div容器,所以可以看到剩下的空间也是被图片继续覆盖掉。

2. background-repeat

可能的取值:

  • repeat:在水平和垂直方向上平铺图片,默认值。
  • repeat-x:在水平方向上平铺图片。
  • repeat-y:在垂直方向上平铺图片。
  • no-repeat:不平铺,只显示一次图片。

特点和实例:

  • repeat:在水平和垂直方向上平铺图片,默认值。
css 复制代码
.example {
  background-repeat: repeat;
}

结果:为默认值,所以背景图结果也为起始结果(最开始的背景图展示)

  • repeat-x:在水平方向上平铺图片。
arduino 复制代码
.example {
  background-size: 200px 100px;//方便展示图片的方向平铺结果
  background-repeat: repeat-x;
}

结果:可以看到图片平铺在x轴(即水平方向上)

  • repeat-y:在垂直方向上平铺图片。
arduino 复制代码
.example {
  background-size: 200px 100px;//方便展示图片的方向平铺结果
  background-repeat: repeat-y;
}

结果:可以看到图片平铺在y轴(即垂直方向上)

  • no-repeat:不平铺,只显示一次图片。
arduino 复制代码
.example {
  background-size: 200px 100px;//方便展示图片的方向平铺结果
  background-repeat: no-repeat;
}

结果:可以看到图片只平铺一次)

3. background-position

可能的取值:

  • <position>:用长度值、百分比值或关键字来描述背景图片的位置。

    • 关键字:top、bottom、left、right、center。

特点和实例:

  • <position>:使用长度值、百分比值或关键字来描述背景图片的位置。
css 复制代码
.example {
    background-image: url('../image/赛博冷色.png');
    background-repeat: no-repeat;
    background-size: 200px 100px; 
    //以上三样式便于观察背景图所设置
    background-position: 10px 20px; 
}

结果:表示距离左边距10px,上边距20px

  • 关键字:使用关键字来描述背景图片的位置。
css 复制代码
.example {
    background-image: url('../image/赛博冷色.png');
    background-repeat: no-repeat;
    background-size: 200px 100px;
    //以上三样式便于观察背景图所设置
    background-position: top center; 
}

结果:表示位于顶部居中位置,其他同理。

希望这篇文章能够帮助到大家,如有错误也欢迎大家补充!

相关推荐
花花鱼6 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093310 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135831 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning31 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人41 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf