CSS-背景属性随学笔记

CSS背景属性

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

　　background-color 背景颜色

　　background-image　　背景图片

　　background-repeat 背景平铺

　　background-attachment 背景透明

　　background-position 背景位置

一、背景颜色

background-color属性定义了元素背景颜色

语法：

background-color：颜色值；

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

一般情况下元素背景颜色默认值是transparent（透明），我们也可以手动指定背景颜色为透明色。

<style>
        div {
            width: 300px;
            height: 100px;
            /* background-color: transparent;  透明的；清澈的*/
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>

二、背景图片

background-image属性描述了元素的背景图片。实际开发中常见于logo或者一些装饰性的小图片或者超大的背景图片，有点事非常便于控制位置。（精灵图也是一种运用场景）

语法：background-image:none|url（url）

其中：none 无背景图；

url：使用绝对或相对路径指定背景图像；

<style>
        div {
            width: 300px;
            height: 300px;
            /* 不要落下url（） */
            background-image: url(images/logo.png);
        }
    </style>
</head>
    <div></div>
</body>

三、背景平铺与位置

1.背景平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

如果图片比盒子小的话，图片会在盒子内水平或者垂直方向平铺，这样看起来很不协调，所以我们要设置背景的平铺属性。

如果需要在html页面上对背景图像进行平铺，可以使用background-repeat属性。

参数：

repeat：背景图像在纵向和横向上平铺

no-repeat：背景图像不平铺

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

<style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(images/logo.png);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 默认情况下背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 背景图像在横向上平铺 */
            /* background-repeat: repeat-x; */
            /* 背景图像在纵向上平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景颜色至于底层 */
        }
    </style>
</head>
<body>
        <div></div>

2.背景位置

添加的背景默认都是在盒子的左上角，所以我们需要自己调整位置。

利用background-position属性可以改变图片在背景中的位置

语法：background-position:x y;

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。

参数值：length 百分数|有浮点数字和单位标识符组成的长度值；

注意：

1.参数是方位名词：

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一直；

如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐。

<style>
        div {width: 300px;
        height: 300px;
        background-image: url(images/logo.png);
        background-repeat: no-repeat;
        /* 方位名词，center top和top center的效果是等价的 */
        /* background-position: center top; */
        background-position: top center;
        /* 此时 水平一定是靠右侧对齐，第二个参数省略 y轴 是垂直居中显示的 */
        background-position: right;
        /* 此时 第一个参数一定top y轴 顶部对齐，第二个参数省略 x轴是水平居中显示的 */
        background-position: top;
        }
    </style>
</head>
<body>
    <div></div>

2.参数是精确单位：

如果参数是精确单位，那么第一个肯定是x坐标，第二个肯定是y坐标；

如果指定一个参数值，那么这个参数值一定是x坐标，第二个参数值默认是垂直居中。

3.参数是混合单位：

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

<style>
        div {width: 300px;
        height: 300px;
        background-color: pink;
        background-image: url(images/logo.png);
        background-repeat: no-repeat;
        /* x轴是20px，y轴是50px，顺序不能变 */
        background-position: 20px 50px;
        /* 20px center 一定是x为200px y是center  等价于 background-position:20px */
        /* background-position: 20px center; */
        /* 20px center 一定是x为center y是20px */
        /* background-position: center 20px; */
        }
    </style>
</head>
<body>
    <div></div>
</body>

四、背景图像的固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动；

background-attachment后期可以制作视差滚动的效果。

语法：background-attachment:scroll|fixed；

参数：scroll 背景图像是随对象内容滚动（默认)；

fixed 背景图像固定。

<style>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            color: #fff;
            /* 把背景图片固定住： */
            background-attachment: fixed;
            font-size: 20px;
        }
    </style>

五、背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

<style>body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            color: #fff;
            /* 把背景图片固定住： */
            /* background-attachment: fixed;
            background-color: black;
            font-size: 20px; */ 
            background:black url(images/bg.jpg) no-repeat fixed center top;/*与上面是等效果的*/
            color: wheat;
        }
    </style>

六、背景半透明

CSS为我们提供了背景颜色半透明的效果。

语法：background:rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值范围在0~1之间。

我们习惯性的把0.3的0省略掉，写为background：rgba(0,0,0，.3)

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响；

CSS3新增属性，是IE9+版本浏览器才支持的；

但是现在实际开发，我们不太关注兼容性写法了，可以放心使用。

    <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            background: rgba(0, 0, 0, 0.3);
        }
    </style>

posted @ 2021-10-25 15:01 第五云阅读(215) 评论(0) 收藏举报

刷新页面返回顶部

CSS-背景属性 随学笔记

公告

CSS-背景属性随学笔记