1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > background系列属性(background-color背景颜色 background-image背景图片 backgrou

background系列属性(background-color背景颜色 background-image背景图片 backgrou

时间:2020-10-23 08:41:47

相关推荐

background系列属性(background-color背景颜色 background-image背景图片 backgrou

background-color背景颜色

背景颜色属性。

css2.1中,颜色的表示方法有哪些?一共有三种:单词、rgb表示法、十六进制表示法

用英语单词来表示:

能够用英语单词来表述的颜色,都是简单颜色。

用rgb方法来表示:

rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。

用逗号隔开。r、g、b的值,每个值的取值范围0~255,一共256个值。16进制表示法,也是两位两位看,看r、g、b,但是没有逗号隔开。

十六进制表示法:

ff就是10进制的255 ,00 就是10进制的0,00就是10进制的0。所以等价于rgb(255,0,0);

十六进制可以简化为3位,所有#aabbcc的形式,能够简化为#abc;

<style>.tit{color: red;/* color: rgb(255, 0, 0);color: rgba(255, 0, 0, 0.7);color: rgba(255, 0, 0, .7);color: #ff0000;color: #f00; */}</style></head><body><h1 class="tit">心态</h1></body>

预览图

background-image背景图片

给盒子添加背景图片

background-image: url('./img/1.jpg');

url()表示网址,uniform resouces locator 同意资源定位符。

background-image的特点:

a). 背景天生是会被平铺满的。

b). padding的区域有背景图。

<style>*{margin: 0;padding: 0;}.box{width: 600px;height: 600px;border: 6px solid pink;padding: 20px;/* 背景图 *//* background-image: url('./images/bjt.jpeg'); */background-image: url('./images/2.gif');/* 平铺方式 *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}</style></head><body><div class="box"></div></body>

预览图

background-position背景定位

设置背景定位

position就是“位置”的意思。background-position就是背景定位属性。

<style>*{margin: 0;padding: 0;}.box{width: 600px;height: 600px;border: 6px solid pink;padding: 20px;/* 背景图 *//* background-image: url('./images/bjt.jpeg'); */background-image: url('./images/2.gif');/* 平铺方式 */background-repeat: no-repeat;/* 背景定位 */background-position: 100px 100px;}</style></head><body><div class="box"></div></body>

预览图

background系列属性(background-color背景颜色 background-image背景图片 background-repeat重复方式以及background-position)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。