background-color背景颜色
背景颜色属性。
css2.1中,颜色的表示方法有哪些?一共有三种:单词、rgb表示法、十六进制表示法
1.1.1 用英语单词来表示
能够用英语单词来表述的颜色,都是简单颜色。
<style>
.tit{
background-color: red;
}
</style>
</head>
<body>
<h1 class="tit">小鱼</h1>
1.1.2 用rgb方法来表示
红色:
background-color: rgb(255,0,0);
rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。
用逗号隔开。r、g、b的值,每个值的取值范围0~255,一共256个值。
常见的几个基础色,要知道是怎么表示的:
绿色
background-color: rgb(0,255,0);
蓝色
background-color: rgb(0,0,255);
黑色
background-color: rgb(0,0,0);
白色
background-color: rgb(255,255,255);
颜色可以叠加,比如黄色就是红色和绿色的叠加
background-color: rgb(255,255,0);
就是红、绿、蓝三种颜色的不同比例叠加
background-color: rgb(111,222,123);
1.1.3 十六进制表示法
用#开头的值,都是16进制的。
background-color: #ff0000;
16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。
ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);
十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;
红色
background-color: #f00;
黑色
background-color: #000;
白色
background-color: #fff;
灰
background-color: #333;
深灰
background-color: #222;
浅灰
background-color: #ccc;
1.2 background-image背景图片
给盒子添加背景图片
background-image: url('./img/1.jpeg');
url()表示网址,uniform resouces locator 同意资源定位符。
background-image的特点:
a). 背景天生是会被平铺满的。
b). padding的区域有背景图。
1.3 background-repeat重复方式
设置背景图是否重复的,重复方式的。
background-repeat属性,有三种值:
background-repeat:no-repeat; 不重复
background-repeat:repeat-x; 横向重复
background-repeat:repeat-y; 纵向重复
/* background-repeat:no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
1.4 background-position背景定位
设置背景定位
position就是“位置”的意思。background-position就是背景定位属性。
1.4.1 background-position:向右移动量 向下移动量;
背景定位background-position这个属性,你使用它的 大前提是:一定要给这个容器设置背景图和设置背景图不要平铺。
background-image: url('./img/1.jpg');
background-repeat: no-repeat;
然后紧接着,才用这个属性。
如果我们希望这个背景图,它向右移动量是100px 向下移动量是200px。它在盒子中显示的效果,如下图所示:
background-position: 100px 200px;
background-position:向右移动量 向下移动量;
定位属性 中 向右移动量 向下移动量 这两个内容的值 可以是负数:
background-position: -50px -120px;
-50px 向右移动量为负50,其实就是这个背景图向左方向移动了50px
-120px 向下移动量为负120,其实就是这个背景图向上方向移动了120px