背景属性

原创于 2018-10-28 10:33:04 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#背景属性

前端学习专栏收录该内容

16 篇文章

订阅专栏

本文深入讲解CSS中的背景属性，包括背景颜色、背景图片、图片位置及重复方式等关键概念。通过实例演示如何设置div元素的背景，从颜色到图片，再到复杂的定位与重复规则。

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

<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        div.c0{
            background-color:red ;
        }
        div.c1{
            width: 600px;
            height: 600px;
            /*border: 1px solid;  显示边框*/
            /*background-image: url("1.jpg");*/
            background-image: url("1.jpg");
            /*不重复*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-position: center; 中心位置*/
            /*background-position: 200px 200px; 移动像素位置*/
        }
    </style>
</head>
<body>
<div class="c0">我是div</div>
<div class="c1">你好</div>

background:red 背景颜色

       width: 600px;   背景宽度
        height: 600px;	背景高度
        /*border: 1px solid;  显示边框*/
        /*background-image: url("1.jpg");*/
        background-image: url("1.jpg"); 背景图片
        /*不重复*/
        /*background-repeat: no-repeat;*/  背景边框若是大于图片，图片不重读，默认重复
        /*background-repeat: repeat-x;*/
        /*background-position: center; 中心位置*/    图片位于边框的中心
        /*background-position: 200px 200px; 移动像素位置*/