CSS学习07：背景平铺

最新推荐文章于 2024-08-25 07:11:13 发布

玉安_ZhangDe

最新推荐文章于 2024-08-25 07:11:13 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： css3 css 前端学习

本文链接：https://blog.csdn.net/qq_47373340/article/details/123698167

版权

CSS 专栏收录该内容

39 篇文章 7 订阅

订阅专栏

本文详细介绍了CSS中background-repeat属性的四种取值：repeat、no-repeat、repeat-x和repeat-y，分别对应背景图片在纵横向上、不、横向和纵向的平铺方式，并通过示例代码展示了每种方式的效果，帮助开发者更好地理解和应用这些平铺方式。

摘要由CSDN通过智能技术生成

使用方法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图片在纵向和横向上平铺（默认）
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 默认repeat平铺 */    
            width: 500px;
            height: 500px;
            background-color: #ccc;
            background-image: url(./images/logo.png);
        }
    </style>
</head>
<body>
    
     <div>

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

no-repeat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            background-image: url(./images/logo.png);
            /* no-repeat 不平铺  用的最多*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    
     <div>

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

repeat-x

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            background-image: url(./images/logo.png);
            /* 水平方向上平铺 */
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    
     <div>

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

repeat-y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            background-image: url(./images/logo.png);
             /* 垂直方向上平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    
     <div>

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