前端开发css标签(前端入门css颜色和背景)

前言

如果网页只有一种颜色,那是非常可怕的,颜色的设置丰富了网页,就如同多彩缤纷的世界。

在了解css颜色之前,我们回顾下计算机是如何显示颜色的?计算机根据色光三原色的原理通过各种算法来显示颜色。

css 颜色 —— color

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红,绿,蓝三种颜色混合色,如下示例,几种写法都是指同一个颜色(红色):

color:red; color: #ff0000; color: rgb(255,0,0) color: rgba(255,0,0,1)

对于16进制形式,每2位表示一个颜色,从左到右分别是红、绿、蓝,每种颜色取值从00 到 FF。

如下示例:

color: #000000; /*黑色*/ color: #ffffff; /*白色*/ color: #ff0000; /*红色*/ color: #00ff00; /*绿色*/ color: #0000ff; /*蓝色*/

对于rgb的表示法,由三个参数组成,分别是红、绿、蓝,每种颜色取值从0 到 255。

如下示例:

color: rgb(0,0,0); /*黑色*/ color: rgb(255,255,255); /*白色*/ color: rgb(255,0,0); /*红色*/ color: rgb(0,255,0); /*绿色*/ color: rgb(0,0,255); /*蓝色*/

红,绿,蓝值从0到255的结合,给出了总额超过1600多万不同的颜色(256 × 256 ×256)。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意,避免设置不能够显示的颜色,可以参考网页安全色:https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成,还有亮度层级,如下图:

前端开发css标签(前端入门css颜色和背景)(1)

rgba 中的a是指透明度,这个是css3新增加的属性,通过rgba可以设置更加漂亮的颜色。

css 背景 —— background

通过background属性可以设置元素的背景色、背景图片,语法如下:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一个声明中设置所有的背景属性,可以在这里设置如下属性:

  • background-color —— 背景颜色。
  • background-image —— 使用的背景图像
  • background-position —— 背景图像的位置
  • background-size —— 背景图片的大小
  • background-repeat —— 如何重复背景图像
  • background-origin —— 背景图片的定位区域
  • background-clip —— 背景的绘制区域
  • background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔,不分先后顺序。可以只有其中的某些值,例如 background:#FF0000 url(img.png)是允许的,但至少有一个值。

建议使用background 简写属性,这样可以更好地兼容较老的浏览器,少写很多代码,当然你也可以分开使用,比如:

background-color: #ff0000; background-image: url(img.png); background-repeat: no-repeat; background-size: 100% auto;

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样,可以使用16进制、rgb、rgba等设置颜色。如下实例:

<html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} </style> </head> <body> <h1>背景色1</h1> <h2>背景色2</h2> <p>背景色3</p> <p class="no2">背景色4</p> </body> </html>

如下图显示:

前端开发css标签(前端入门css颜色和背景)(2)

注意:background-color: transparent; 指透明色,不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片,在早期网页制作中被广泛应用,如今已不建议大量使用。如下实例:

body {background-image:url(/static/bg.gif);}

这里使用了一个125*125大小的图片,如下:

前端开发css标签(前端入门css颜色和背景)(3)

但是你会发现,整个网页铺满了图片,上面的代码默认会铺满整个页面从左到右,从上到下 。如果不想被平铺,可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片,如下:

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多个图像以逗号隔开,在页面中多个图片会叠加显示,第一张图片显示在最顶端。

如下效果:

前端开发css标签(前端入门css颜色和背景)(4)

3、背景重复方式 —— background-repeat

它有如下几个属性:

repeat

默认。背景图像将在垂直方向和水平方向重复。

repeat-x

背景图像将在水平方向重复。

repeat-y

背景图像将在垂直方向重复。

no-repeat

背景图像不重复。

inherit

从父元素继承 background-repeat 属性的设置。

实例如下:

前端开发css标签(前端入门css颜色和背景)(5)

4、背景图的位置 —— background-position

背景图片默认显示在左上角,语法如下:

background-position: x y; // x 距离左边距离,y距离顶部距离

如果要改变它的位置,可以使用关键字:top、bottom、left、right 和 center;或者使用长度值,如 100px 或 5cm;也可以使用百分数值。

x 可以取值 百分比| 数值| left | center | right。

y 可以取值 百分比| 数值| top| center | bottom。

当只设置一个值的时候,另一个会缺省为 center。

使用关键字,将背景图片水平居中,垂直居中:

background-image:url('/statics/images/course/smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center;

前端开发css标签(前端入门css颜色和背景)(6)

使用百分比%:

background-image:url('/statics/images/course/smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position: 50% 50%;

50% 50% 等同于 center center,显示效果和上图一样。

还可以使用具体数值,比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position: 50px 50px;

显示效果如下:

前端开发css标签(前端入门css颜色和背景)(7)

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点,语法:

background-origin: padding-box|border-box|content-box;

几种值得含义:

padding-box

背景图像相对填充框的位置

border-box

背景图像相对边界框的位置

content-box

背景图像相对内容框的位置

如下实例:

前端开发css标签(前端入门css颜色和背景)(8)

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸,可以通过此属性设置背景图片在元素上的大小,语法:

background-size: width height;

宽度和高度可以使用 数值、百分比%、cover 及 contain ;

数值:可以使用任何单位的数字,比如 px、em、cm等。如果设置一个值,第二个为"auto(自动)"。

百分比%:相对于其所在html原始宽度和高度,如果设置一个值,第二个为"auto(自动)"。

cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain:把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

如下示例:

前端开发css标签(前端入门css颜色和背景)(9)

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

background-attachment 属性有以下几个值:

scroll

背景图片随页面的其余部分滚动。这是默认

fixed

背景图像是固定的

inherit

指定background-attachment的设置应该从父元素继承

local

背景图片随滚动元素滚动

如设置一个固定的背景图片,不跟随页面滚动:

background-attachment:fixed;

前端开发css标签(前端入门css颜色和背景)(10)

滚动滚动条,会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下:

background-clip: border-box|padding-box|content-box;

border-box

默认值。背景绘制在边框方框内(剪切成边框方框)。

padding-box

背景绘制在衬距方框内(剪切成衬距方框)。

content-box

背景绘制在内容方框内(剪切成内容方框)。

这个属性类似于 background-origin ,只不过它会裁剪背景图片,如下示例:

前端开发css标签(前端入门css颜色和背景)(11)

前端开发css标签(前端入门css颜色和背景)(12)

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合,语法:

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值:

前端开发css标签(前端入门css颜色和背景)(13)

示例如下:

前端开发css标签(前端入门css颜色和背景)(14)

正常模式

前端开发css标签(前端入门css颜色和背景)(15)

luminosity 亮度模式

前端开发css标签(前端入门css颜色和背景)(16)

color 颜色模式

其它模式可以自己试试,看下有什么区别。

到此,我们了解了颜色和背景的使用方法,尤其是背景的使用,由于它的属性很多,可以简写也可以分开写,要想完全掌握,还得多练习,每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式,主要是可以少写很多代码。以上介绍难免有误,或不齐全,欢迎指出错误,并补充。

上篇:前端入门——css链接样式

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页