PHP前端开发
首页 CSS正文

手把手带你了解CSS 背景属性（Background）

百变鹏仔 3个月前 (09-20) #CSS
文章标签 手把手

在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。css 中提供了一系列用于设置 html 元素背景效果的属性，下面本篇文章就来带大家聊聊css 背景属性，希望对大家有所帮助！

CSS 背景属性

用于属性名CSS 版本浏览器支持
1.在一个声明中设置 所有的背景属性。background1IE8- 不支持多个背景图像。IE7- 不支持"inherit"。
2.背景图像是否 固定或者随着页面的其余部分 滚动。background-attachment1IE 不支持属性值 “inherit”。
3.元素的 背景颜色。background-color1IE 不支持属性值 “inherit”。
4.元素的 背景图像。background-image1IE 不支持属性值 “inherit”。
5.背景图像的 开始位置。background-position1IE 不支持属性值 “inherit”。
6.是否及如何 重复背景图像。background-repeat1IE 不支持属性值 “inherit”。
7.背景的 绘制区域。background-clip3都支持，IE8- 不支持。
8.背景图片的 定位区域。background-origin3都支持，IE8- 不支持。
9.背景 图片的尺寸。background-size3都支持，IE8- 不支持。

1. background 属性: 一次性 集中定义 8个 背景相关属性

<style>    body    {     background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;     }</style>

  • ⑵ background 属性 “inherit” 浏览器支持

  • ② 背景background的 属性值省略      
  • ③ 背景简写 默认值      
  • ② background-clip 和 background-origin 可能 出现的次数    
  • 如果 出现 2 次:
  • ③ 背景颜色 background-color的 代码位置    

  • ⑻ 尽量使用 背景background属性

  • ⑼ 背景简写background的版本

  • ⑽ 背景简写background 的JavaScript 语法

    • p{/*background-image: url(../images/四叶草背景.png);*//*background-repeat: no-repeat;*//*第一个值 水平位置,第二个值 垂直位置*//*background-position: 50px 100px;	*/    /*背景固定*//*background-attachment: fixed;*//*background-color: yellow;	*/background: url(../images/四叶草背景.png) no-repeat 50px 100px;}

    2. background-color 属性: 元素的 背景颜色 (纯色,范围到 边框区的 外边缘)

  • 使用 background-color 属性
  • 背景颜色 属性
  • ② 如果 边框 有透明 部分（如 虚线 边框）

  • 语法示例

    • /* 关键字 或 颜色名 Keyword values */background-color: red;background-color: indigo;/* 十六进制值 Hexadecimal value  (设置透明值 和 不设置 不透明值) */background-color: #bbff00;    /* 完全不透明 Fully opaque (不设置 不透明值)*/background-color: #bf0;       /* 完全不透明的 简写 Fully opaque shorthand (不设置 不透明值)*/background-color: #11ffee00;  /* 完全透明 Fully transparent (设置 不透明值)*/background-color: #1fe0;      /* 完全透明的 简写 Fully transparent shorthand (设置 不透明值) */background-color: #11ffeeff;  /* 完全不透明 Fully opaque (设置 不透明值)*/background-color: #1fef;      /* 完全不透明的 简写 Fully opaque shorthand (设置 不透明值) *//* RGB value */background-color: rgb(255, 255, 128);        /* 完全不透明 Fully opaque */background-color: rgba(117, 190, 218, 0.5);  /* 50%透明 50% transparent (设置 不透明值)*//* HSL value */background-color: hsl(50, 33%, 25%);         /* 完全不透明 Fully opaque */background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent (设置 不透明值)*//* 特别的关键字 Special keyword values */background-color: currentcolor;background-color: transparent;/* 全局性的值 Global values */background-color: inherit;background-color: initial;background-color: unset;

  • ② 十六进制: hex_number

  • ③ rgb: rgb(),rgba()

  • ④ hsl:hsl(),hsla()

  • ⑤ 透明 (无颜色,默认值): transparent

  • 严格来说, 透明色,也是 一种颜色.

  • ⑥ 继承:inherit

  • ⑹ 背景颜色 css 版本  
  • ⑺ JavaScript 语法  


  • css

    • .bgimg-fixed {    background-color: pink;        background-image: url(../images/四叶草背景.png);        background-repeat: no-repeat;}
        /*把十六进制 设置了透明值的 红色,最后两位的 33 就是透明值*/    background-color: #ff000066;    background-image: url(../images/四叶草背景.png);    background-repeat: no-repeat;}

    3. background-image 属性: 背景图像 (范围到 内边距区的 外边缘,不含 边框)

  • ⑵ 元素的 背景范围

  • ⑷ 背景图像的 语法

  • ② 无图像 (默认值): none      
  • ③ 继承: inherit      
  • ④ 渐变图像      
  • ② 不显示背景色 也要设置 (图像的回退):

  • ② 图像的 重复方式: background-repeat

  • ③ 图像的 位置:background-position

  • ④ 图像/背景色的 裁剪/绘制 区域: background-clip

  • ② 背景颜色 在背景图像之下:
  • ③ 位置关系: 边框(最上方,最接近用户) > 背景图像 > 背景颜色

  • ⑽ 图像和盒子:

    • #lizard{background-image: url("../images/lizard.png"), url("../images/star.png");}
    #lizard{background-image: url("../images/四叶草背景.png"), url("../images/lizard.png");background-repeat: no-repeat,repeat;}
  • CSS 中的 两种类型的图像：
  • ② 动态生成 的 图像
  • 附加的 CSS图像函数      
  • ② gradient 相关的方法 生成的图像 (常用,熟记)
  • ③ element()方法: (实验中 方法)

  • 图像类型值的 浏览器支持

    • /* url()方法, 只要 test.jpg 是图像文件*/url(test.jpg)   /*一个 <gradient> 标签*/ linear-gradient(to bottom, blue, red)  /*页面的一部分, 使用了element()方法,如果 colonne3 是存在于页面中的一个元素id即可*/element(#colonne3)       image(ltr 'arrow.png#xywh=0,0,16,16', red)                             /* <url>的一个16x16节，从原来的左上角开始图像只要arrow.png 是一个支持的图像，否则是一个固体红色的样布。如果语言是rtl，则图像将水平翻转. */ cross-fade(20% url(twenty.png), url(eighty.png))                             /* 交叉褪色的图像，其中20%是不透明的80%是不透明的. */ image-set('test.jpg' 1x, 'test-2x.jpg' 2x)                              /* 具有不同分辨率的 图像的选择 */</url></gradient>

    4. background-attachment 属性: 背景图像的 固定和滚动

  • 背景图像 附着方式 属性

  • ② 固定: fixed

  • ③ 相对于元素内容 固定: local

  • ④ 继承 父元素: inherit

    • /* Keyword values */background-attachment: scroll;background-attachment: fixed;background-attachment: local;/* Global values */background-attachment: inherit;background-attachment: initial;background-attachment: unset;
  • ⑸ background-attachment的 版本  
  • ⑹ 背景图像 附着的 JavaScript 语法  

    • 注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

    .bgimg-fixed{background-image: url(../images/四叶草背景.png);background-attachment: fixed;background-repeat: no-repeat;}
        <p>《花儿为什么这样红》是电影《冰山上的来客》中的一首著名插曲，是塔吉克民歌改编而来。影片从真假古兰丹姆 与战士阿米尔的爱情悬念出发，讲述了边疆战士和杨排长 一起与特务假古兰丹姆斗智斗勇，最终胜利的阿米尔和真古兰丹姆 也得以重逢的故事。该片描绘了 边疆地区军民惊险的反特斗争生活。作曲家雷振邦先生的电影音乐常以民间音乐素材构成音乐主题，也有根据民歌改编发展的，所以具有浓郁的民族风格和地区特色。《花儿为什么这样红》本来是一首古老的塔吉克族民歌，后来由雷振邦先生改编成电影《冰山上的来客》插曲。插曲表现的是电影故事中，一名驻守新疆唐古拉山的解放军边防战士，同当地一名姑娘的一段爱情故事。主要参考了一首古老的塔吉克族民间歌曲《古力碧塔》。《古力碧塔》讲述的是一名为商人赶脚的塔吉克青年，爱上了喀布尔城的一位公主，但遭到了反对，青年只能顺着古丝绸之路流浪，把优美凄凉的歌声传遍了所有他路经的地方，最后传回到帕米尔高原他的故乡。</p>

  • ② 跟着元素 一起滚动: scroll(默认值)

  • css

    • .bgimg-fixed{background-image:url(../images/greenbgimage.jpg), url(../images/四叶草背景.png);background-attachment: fixed,scroll;background-repeat: no-repeat,repeat-y;}

    5. background-position 属性: 背景图像的 位置 (先水平,后垂直, 关键词,百分比,长度值)

    /* 关键词 Keyword values */background-position: top;background-position: bottom;background-position: left;background-position: right;background-position: center;/* 百分比值 <percentage> values */background-position: 25% 75%;/* 长度值 <length> values */background-position: 0 0;background-position: 1cm 2cm;background-position: 10ch 8em;/* 多背景图片的 的位置 Multiple images */background-position: 0 0, center;/* 指明 距离 上下左右边缘的 的距离. Edge offsets values */background-position: bottom 10px right 20px;background-position: right 3em bottom 10px;background-position: bottom 10px right;background-position: top right 10px;/* 全局支持的值 Global values */background-position: inherit;background-position: initial;background-position: unset;</length></percentage>
  • 垂直方向：上边，中心，下边        
  • ② 百分比: x% y%    
  • 两个值: 先水平，后垂直,省略一个 是 居中50%      
  • 垂直位置: y%        
  • 左上角: 0% 0%
  • 右下角: 100% 100%
  • 百分比值 无效的情况:
  • 使用绝对值: 在这种情况下，需要为偏移 使用绝对值（例如 px）。
  • 偏移值的 计算      
  • 垂直位置: ypos        
  • 单位      
  • ④ 混合使用: 百分比,关键词 和长度    
  • ② 一个值:

  • 属性值的 分隔

  • 属性值的 正负: 图片 位移方向

    • .bgimg-fixed {    background-color: #c0c0c0;    background-image: url("../images/star.png");    background-repeat: no-repeat;    /*top = center top */    background-position: top;}
    .bgimg-fixed {    background-color: #c0c0c0;    background-image: url("../images/star.png");    background-repeat: no-repeat;    /*10% = 10% 50% */    background-position: 10%;}
    .bgimg-fixed {    background-color: #c0c0c0;    background-image: url("../images/star.png");    background-repeat: no-repeat;    /*关键字 不分先后顺序*/    background-position: right bottom;}
  • 关键字后面 不指定 距离值,默认就是 紧贴着边缘的.
    • .bgimg-fixed {    background-color: #c0c0c0;    background-image: url("../images/star.png");    background-repeat: no-repeat;    /*关键字 不分先后顺序,距离右边缘 10px,距离 下边缘60px */    background-position: right 10px bottom 60px;}
  • bottom left 25% = top 100% 25%    
  • right = right center = left 100% center = left 100% top 50%    
    • .bgimg-fixed {    background-color: #c0c0c0;    background-image: url("../images/star.png"),url("../images/四叶草背景.png");    background-repeat: no-repeat,no-repeat;    background-position: right bottom 100px,left 10px bottom 30px;}
    .bgimg-fixed {    background-color: #c0c0c0;    background-image: url("../images/star.png"),url("../images/四叶草背景.png");    background-repeat: no-repeat,no-repeat;    background-position: right bottom -30px,left -30px bottom -30px;}

    6. background-repeat 属性 : 背景图像的 重复方式 (单值,双值,超出部分 裁剪)

  • 背景图像重复 属性
    • /* 单值语法 */background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: repeat;background-repeat: space;background-repeat: round;background-repeat: no-repeat;/* 双值语法: 水平 horizontal | 垂直vertical */background-repeat: repeat space;background-repeat: repeat repeat;background-repeat: round space;background-repeat: no-repeat round;background-repeat: inherit;
    单值等价的双值
    repeat-x= repeat no-repeat
    repeat-y= no-repeat repeat
    repeat= repeat repeat
    space= space space
    round= round round
    no-repeat= no-repeat no-repeat

  • ② 水平重复: repeat-x

  • ③ 垂直重复: repeat-y


  • ④ 不重复: no-repeat

  • ⑤ 重复部分的图像 不会被裁剪: space

  • ⑥ 压缩显示 图像(不裁剪): round

  • 不裁剪: 通过伸展和压缩 ,显示完整图像,不裁剪 图像.
  • 添加图像 和 图像压缩: 当下一个图像 被添加后, 所有的当前的图像 会被压缩来腾出空间.

  • ⑦ 继承 父亲: inherit

    • 示例1: 把背景图像设置成 round space和 round = round round的区别

    #lizard{/*background-image: url("../images/lizard.png");*/background-image: url("../images/四叶草背景.png");background-repeat:round space;}

    7. CSS3 background-clip 属性: 背景色/图像 的 绘制/裁剪 区域 (背景 显示的区域)

  • 没有 设置背景 (即 没有设置 背景图像 background-image或背景颜色 background-color)
    • /* 关键字值 Keyword values */background-clip: border-box;background-clip: padding-box;background-clip: content-box;background-clip: text;/* Global values */background-clip: inherit;background-clip: initial;background-clip: unset;
  • 包括: 边框

  • ② 内边距框: padding-box

  • 不包括: 边框      

  • ③ 内容框 : content-box

  • 不包括: 边框 和 内边距

  • ④ 文字: text (尚在 实验中的属性)

  • 使用前提:
    •     <p>天道酬勤, 是一个汉语成语，读作 tiān dào chóu qín。意思是 上天会按照 每个人付出的勤奋，给予相应的酬劳。多一分耕耘，多一分收获，只要你付出了 足够的努力，将来也一定会 得到相应的收获。出自《周易》中的卦辞。</p>
    #clipTest{/*设置元素的 外边距 边框 内边距 字体大小/颜色/粗细*/margin: 20px;border: 10px dashed #000;padding: 20px;font-size: 1.2em;font-weight: bold;color: #fff;/*设置 背景图像 和 背景颜色(作为背景图像的回退)*/background-color: #c0c0c0;background-image: url("../images/hand.jpg");/*设置背景的 绘制/裁剪 区域*/    /*到 边框区的 外边缘*/background-clip: border-box;}
  • 对背景色 background-color,也是有效的.
    • 	/*到 内边距区的 外边缘*/-webkit-background-clip: padding-box;-moz-background-clip: padding-box;background-clip: padding-box;

  • 8. CSS3 background-origin 属性: 背景图像的 原点相对区域 (对 背景色 无效,搭配 background-position )

  • 背景图像原点 属性
  • ② 搭配属性:
    • /* 关键字值 Keyword values */background-origin: border-box;background-origin: padding-box;background-origin: content-box;/* Global values */background-origin: inherit;background-origin: initial;background-origin: unset;
  • ② 内边距区(默认值): padding-box    
  • ③ 内容区: content-box    
  • 多值: 同时设置 多个背景图像 的 原点相对区域时,多个属性值之间 ,用 逗号, 分隔.
    • #clipTest{/*设置元素的 外边距 边框 内边距 字体大小/颜色/粗细*/margin: 20px;border: 10px dashed #000;padding: 20px;font-size: 1.2em;font-weight: bold;/*color: transparent;*/color: #fff;/*设置 背景图像 和 背景颜色(作为背景图像的回退 这里为了看清原点位置,先注释掉)*//*background-color: #c0c0c0;*/background-image: url("../images/hand.jpg");background-repeat: no-repeat;/*背景图像的原点 相对位置*/-webkit-background-origin: border-box;-moz-background-origin: border-box;background-origin: border-box;}
    	-webkit-background-origin: content-box;-moz-background-origin:content-box;background-origin: content-box;/*背景图像的位置*/background-position:  10px 10px;

    9. CSS3 background-size 属性: 背景图像的 大小 (可定义 宽高)

  • 背景颜色 和 背景图像:
    • /* 关键字 */background-size: coverbackground-size: contain/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */background-size: 50%background-size: 3embackground-size: 12pxbackground-size: auto/* 两个值 *//* 第一个值指定图片的宽度，第二个值指定图片的高度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto/* 逗号分隔的多个值：设置多重背景 */background-size: auto, auto     /* 不同于background-size: auto auto */background-size: 50%, 25%, 25%background-size: 6px, auto, contain/* 全局属性 */background-size: inherit;background-size: initial;background-size: unset;
  • 宽 X 高      
  • 一个值:

  • ② 宽高 百分比值: width% height%

  • percentage %
  • 宽 X 高      
  • 一个值:

  • ③ 裁剪式 完全覆盖 背景区 : cover

  • 图片 可能会裁剪: 背景图像的 某些部分, 也许 无法显示 在背景定位区域中。

  • ④ 不裁剪式 完全覆盖 背景区: contain

  • ⑤ 按图片比例 自动缩放:auto

  • ▲ 多个值: 若要指定 多个背景图像的大小，请使用 逗号,分隔 每个背景图像的值。

  • ③ 渐变: 没有 固有的尺寸和比例。
  • ④ element()函数: 使用element()函数 创建的背景图像 使用 生成元素的 固有尺寸和比例。
  • ② contain 或 cover      
  • ③ auto 或 auto auto      
  • 没有固有尺寸 与 固有比例
  • 没有 固有尺寸, 但是 有固有比例
  • 只有一个固定尺寸 与 比例
  • 只有一个固定尺寸 但是 没有比例
  • ④ 一个为 auto ,另一个不是 auto    
  • 未指定的长度
  • 图像 没有固有比例
  • 未指定的长度
  • 注意: 对于 没有固有尺寸 或 固有比例的矢量图 , 不是所有的浏览器 都支持。
    •   background-image: url(bg-image.png);  -webkit-background-size: 100% 100%;           /* Safari 3.0 */     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */       -o-background-size: 100% 100%;           /* Opera 9.5 */          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  • 安全值 示例

    • .gradient-example {  width: 50px;  height: 100px;  background-image: linear-gradient(blue, red);  /* 不能安全使用的 值形式 Not safe to use */  background-size: 25px;  background-size: 50%;  background-size: auto 50px;  background-size: auto 50%;  /* 能安全使用的 值形式 Safe to use */  background-size: 25px 50px;  background-size: 50% 50%;  }
    #lizard {    border: 10px dashed #000;    /*用渐变 做背景图像*/    background-image: linear-gradient(yellow,green);    background-color: #c0c0c0;    background-repeat: no-repeat;    /*背景图像的大小*/    background-size: 300px 100px;}
    #lizard {    border: 10px dashed #000;    padding: 10px;    background-image: url("../images/lizard.png");    background-color: #c0c0c0;    background-repeat: no-repeat;    /*背景图像的大小*/    /*background-size: 200px;*/}
    只设置 宽度值: background-size: 200px;(按比例缩放)宽高一起设置: background-size: 200px 100px;(按指定值,可能改变比例)
    裁剪式 完全覆盖: background-size: cover;(按比例缩放)不裁剪式 安全覆盖: background-size: contain;(按比例缩放)

    （学习视频分享：web前端入门）

    文章推荐
    最新文章
    标签列表
    关于我们 | 联系我们 | 网站地图
    本站为非盈利性网站,不接受任何赞助和广告。
    特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com
    互联网ICP备案： 陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客