background系列属性

仙鹤__

已于 2023-04-03 23:07:12 修改

阅读量564

点赞数

文章标签： css css3 html5

于 2023-04-03 23:06:07 首次发布

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129942080

版权

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

仙鹤__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
background系列属性

光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。背景定位background-position这个属性，你使用它的大前提是：一定要给这个容器设置背景图和设置背景图不要平铺。ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。如果我们希望这个背景图，它向右移动量是100px 向下移动量是200px。-50px 向右移动量为负50，其实就是这个背景图向左方向移动了50px。r、g、b的值，每个值的取值范围0~255，一共256个值。
复制链接

扫一扫