CSS3-background的基本用法

最新推荐文章于 2025-06-01 16:17:14 发布

原创最新推荐文章于 2025-06-01 16:17:14 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了CSS中的背景属性，包括单一样式和复合样式的使用方法。解释了background-image、background-repeat、background-position及background-size等属性的作用及取值方式，并通过实例展示了如何设置背景图片的平铺、位置及大小。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单一样式</title>
<style>
    *{margin:0px;padding: 0px;}
    .box-top{width: 50%;height: 400px;background-color: #ccc;margin: 1% auto;background-image: url(1.jpg) ;background-repeat: no-repeat;background-position: 100px 100px; background-size: contain}
    /*
        下面的都叫做单一样式
        background-image: url(1.jpg)   默认状态下会平铺当前容器下的四周空间

        background-repeat:有三个取值
        no-repeat 不平铺
        repeat-x 平铺x轴方向
        repeat-y 平铺y轴方向

        background-position:
        前后取值对应 x轴 y轴 
        可以是px的值 如 100px 100px
        也可以是，x轴  left|center|right      y轴   top|center|bottom
        它在底层方面实现了可以把x轴和y轴自动识别,如top left 和 left top是一个效果。

        background-size:
        取值可以是
        length直接是像素 对应宽度和高度的长度如  100px 100px;如果只提供一个值，第二个值会被设置为auto
        percentage百分比 对应宽度和高度的长度如 20% 20% ;如果只提供一个值，第二个值会被设置为auto
        cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
        contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
    */
</style>
</head>
<body>
<div class="box-top">

</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
    <title>复合样式</title>
    <meta charset="utf-8">
    <style>
        *{margin:0px;padding: 0px}
        .box-top{width: 60%;height: 3000px;background: url(1.jpg) no-repeat fixed #ccc center top;background-size: contain}
        /*
            在这里background-size不能写在backgound复合样式里面。因为position和size都可以是length(直接写宽高多少像素)
            写backgound-size要另外写
        */
    </style>
</head>
<body>
    <div class="box-top"></div>
</body>
</html>