css背景

大家好ヽ( o･ｪ･)ﾉ。随便写写哈。

background-color 属性

首先从最简单的开始，设置背景的颜色值。

初始值: transparent
是否继承属性: 否

关于继承可能有同学不是很懂，这里附注简单理解一下：
我们都知道html标签都是层层嵌套的，我给外层设置了属性，而内层也被应用了这个属性，那么这个属性就是继承的。
继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

属性值

  1. transparent：默认值。指定背景颜色应该是透明的。其实这个属性大部分情况下并不会使用。
  2. color：指定背景颜色。
    • 预定义的颜色名称： 规定颜色值为颜色名称的颜色（比如 red）。
    • 十六进制颜色：规定颜色值为十六进制值的颜色（比如 #ff0000）。
    • RGB颜色： 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
    • RGBA颜色：RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。RGBA（红，绿，蓝，alpha）。Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
    • HSL颜色：IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。HSL（色调，饱和度，明度）。（比如hsl(120,65%,75%)）。
    • HSLA颜色：HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。HSLA（色调，饱和度，亮度，alpha）。
  3. 特殊的关键字。很有趣的关键字currentColor。(๑￫ܫ￩)
    • currentColor：css3的属性。可以替换使用到颜色值的地方，意思是当前颜色，确切的说是当前的标签所继承的文字颜色。currentColor = color的值。
  4. 继承。同样使用的不多，但是合理的运用继承又能使CSS 代码更加符合 DRY（Don't Repeat Yourself 避免重复代码）原则。
    • inherit：继承。规定背景颜色从父元素继承。
    • initial：IE 不支持该关键字。默认。
    • unset：不设置。如果该属性是默认继承属性，该值等同于 inherit，如果该属性是非继承属性，该值等同于 initial。background-color 为非继承属性，所以现在相当于 initial。

使用示例

background-color: red; /* Keyword */
background-color: #bbff00; /* Hexadecimal */
background-color: rgb(255, 255, 128); /* RGB */
background-color: hsla(50, 33%, 25%, 0.75); /* HSLA */
background-color: transparent; /* Special keyword */
background-color: inherit; /* Global values */
background-color: initial; /* Global values */
background-color: unset; /* Global values */
background-color: currentColor; /* Special keyword */

指定颜色值
currentColor的使用

background-image 属性

设置一个元素的背景图像，可以设置一个或者多个背景图像。但是注意，如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

初始值: none
是否继承属性: 否

属性值

每个背景图像被明确规定为关键字 none 或是一个 <image>值。

  1. none：默认值。不显示背景图像。
  2. <image>值：url('URL')。指向图像的路径。
  3. 继承：见 background-color 属性，这里不重复介绍。
  4. 渐变属性：CSS3的属性。
    • linear-gradient() 函数：创建一个线性渐变的 "图像"(从上到下)。（例如 linear-gradient(red, yellow, blue)。从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色。）
    • radial-gradient() 函数：用径向渐变创建 "图像"。
    • ** repeating-linear-gradient() 函数**：重复的线性渐变 "图像"。
    • ** repeating-radial-gradient() 函数**：重复的径向渐变 "图像"。

使用示例

/* 单个背景图 */
background-image: url("../../media/examples/aaa.png");
/* 多个背景图 */
background-image: url("../../media/examples/lizard.png"),
                  url("../../media/examples/star.png");
/* 渐变色*/
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

背景图设置

background-repeat 属性

定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space)。

初始值: repeat
是否继承属性: 否

属性值

  1. repeat：默认值，背景图像将向垂直和水平方向重复。
  2. repeat-x：只有水平位置会重复背景图像。
  3. repeat-y：只有垂直位置会重复背景图像。
  4. no-repeat：background-image不会重复。
  5. space：背景图不会缩放，会被裁切。
  6. round：缩放背景图至容器大小。
  7. 继承：见 background-color 属性，这里不重复介绍。

使用示例

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

/* 双值语法：水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* 继承*/
background-repeat: inherit;

背景图像的重复方式

background-position 属性

为每一个背景图片设置初始位置。

这个位置是相对于由 background-origin（css3的属性） 定义的位置图层的。

初始值: 0% 0%
是否继承属性: 否

属性值

  1. <position>值：定义一组 x/y 坐标（相对于一个元素盒子模型的边缘），来放置这个item。它可以被定义为一个值或者两个值，水平和垂直的位置。如果仅指定一个值，其他值将会是 center 。
    • top, left, bottom, right。用来指定把这个item 放在哪一个边缘。
    • 关键字 center，用来居中背景图片。
    • length（px），percentage（百分比）。指定相对于左边缘的 x 坐标，y 坐标的位置。
  2. 继承：见 background-color 属性，这里不重复介绍。

百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。

使用示例

/* 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;
background-position: 10px 8px;

/* Edge offsets values */
background-position: bottom 10px right 20px;

/* Multiple images */
background-position: 0 0, center;

/* Global values */
background-position: inherit;

背景图片设置初始位置

background-attachment 属性

设置背景图像是否固定或者随着页面的其余部分滚动。

初始值: scroll
是否继承属性: 否

属性值

  1. scroll：默认值。背景图片随着页面的滚动而滚动。
  2. fixed：此关键属性值表示背景相对于视口固定。背景图片不会随着页面的滚动而滚动。
  3. local：此关键属性值表示背景相对于元素的内容固定。背景图片会随着元素内容的滚动而滚动。
  4. 继承：见 background-color 属性，这里不重复介绍。

使用示例

background-attachment: fixed;
background-attachment: scroll;
background-attachment: local;
background-attachment: local, scroll;

背景图像是否固定

background 属性

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之间用空格分隔，不分先后顺序。

是否继承属性: 否

使用示例

background: green;
background: no-repeat url("aaa.png");
background: #00ff00 url('aaa.gif') no-repeat fixed center;

背景缩写属性

总结

image.png

结束语

来呀，快活呀，反正有大把时光～

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342