百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

HTML中 background背景类属性详细介绍

作者:鹏仔先生日期:2020-06-02 10:49:53浏览:1388分类:CSS

1.背景颜色

    语法:

background-color: 颜色值;

    注:颜色值的设置方法同字体颜色。


2.背景图

    语法:

background-image: url(图片路径);

    注:网页中常见的两种图片形式:插入图片和背景图

        ① 使用img标签插入图片:数据型的图片(经常需要更换网页内容的图片);

        ② 背景图:用来装饰网页的图片(在一定时期内不会发生改变的图片),可以在背景图上显示文字和其他内容。


3.背景平铺属性

    语法:

background-repeat: no-repeat (不平铺) | repeat (平铺) | repeat-x (横向平铺) | repeat-y (纵向平铺);


4.背景图位置

    语法:

background-position: left | center | right | 数值   top | center | right | 数值;

    注:第一个值代表水平方向,第二值代表垂直方向;

           ②当设置为数值时,向右,向下为正,向左,向上为负;

           ③当两个值都为 centrer 时,可以省略第二个值。


5.背景属性简写方式

    语法:

background: 背景色  背景图  背景平铺  背景图位置;

    eg:

background: pink  url(图片路径)  no-repeat  right  bottom;

    注:简写方式中省略的属性值使用默认值。


6.背景图显示规则

    ①当背景尺寸等于容器尺寸时,背景图恰好显示在容器中;

    ②当背景尺寸小于容器尺寸时,背景图默认平铺,直至铺满整个容器;

    ③当背景尺寸大于容器尺寸时,只能显示容器范围以内的背景图。


7.背景图固定

    语法:

background-attachment: scroll (滚动) | fixed (固定);

    注:当容器出现滚动条时,设置fixed,背景图固定不跟随滚动条滚动。


8.网页中常见的图片格式:

    ①jpg:有损压缩格式,靠损失图片本身的质量来减小图片体积,适用于色彩数量丰富的图片;

    ②gif:有损压缩格式,支持动画,支持透明;

    ③png:有损压缩格式,支持透明。


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯