Web学习历程（七）

程序员文章站 2024-01-27 17:26:04

...

本文主要内容：CSS背景属性

background 的常见背景属性

css2.1 中，常见的背景属性有以下几种：（经常用到，要记住）

background-color:#ff99ff; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
```
 no-repeat不要平铺；
 repeat-x横向平铺；
 repeat-y纵向平铺。
```
background-position:center top; 设置背景图片在当前容器中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
另外还有一个综合属性叫做background，它的作用是：将上面的多个属性写在一个声明中。

CSS3 中，新增了一些background属性：

background-origin
background-clip 背景裁切
background-size 调整尺寸
多重背景

上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。

1、 background-color：背景颜色的表示方法

background-color 属性定义了元素的背景颜色。页面的背景颜色使用在body的选择器中:

body {background-color:#b0c4de;}

效果如下：
Web学习历程（七）
在CSS中，颜色值通常以以下方式定义：

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

比如红色可以有下面三种表示方式：

    background-color: red;
	background-color: rgb(255,0,0);
	background-color: #ff0000;

除了上述三种颜色表示方式，还可用RGBA或者HSLA。RGBA、HSLA可应用于所有使用颜色的地方
下面为大家介绍这两种表示方法。

RGB 表示法

RGB 表示三原色“红”red、“绿”green、“蓝”blue。
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。

比如红色：

background-color: rgb(255,0,0);

黑色：

background-color: rgb(0,0,0);

颜色可以叠加，比如黄色就是红色和绿色的叠加：

background-color: rgb(255,255,0);

RGBA 表示法

 background-color: rgba(0, 0, 255, 0.3);

代码解释：

RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。

取值：

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A： Alpha透明度。取值0~1之间。

说明：此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

HSL表示法

说明：

H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%。值越大，越鲜艳。
L：Lightness(亮度)。取值为：0.0% - 100.0%。亮度最大时为白色，最小时为黑色。

HSLA表示法

此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度（取值0~1）。

举例：background-color: hsla(240,50%,50%,0.4);

上述5中颜色表示方式举例：

<!-- 放在head中 -->
<style>
        h1{
            background-color: #0bc4de;
        }
        h2{
            background-color: red;
        }
        h3{
            background-color: rgb(0,255,0);
        }
        h4{
            background-color: rgba(0, 0, 255, 0.3);
        }
        h5{
            background-color: hsla(240,50%,50%,0.4);
        }

    </style>

<body>
    <h1>我的CSS web页面1</h1>
    <h2>我的CSS web页面2</h2>
    <h3>我的CSS web页面3</h3>
    <h4>我的CSS web页面</h4>
    <h5>我的CSS web页面</h5>
    
</body>

效果展示：
Web学习历程（七）

2、background-image:url属性：将图像设置为背景

background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:


body{
            background-image: url('001.jpg');
            background-color: aqua;
        }

效果展示
Web学习历程（七）
注意：注意文字与背景图像的组合，否则容易造成文本可读性差

3、background-repeat属性

background-repeat:no-repeat;设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：

no-repeat（不要平铺）
repeat-x（横向平铺）
repeat-y（纵向平铺）

这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
（1）不加这个属性时：（即默认时）图片会被平铺满

    <style>
        body{
            background-image: url('002.jpg');
        }

    </style>

Web学习历程（七）
（2）属性值为no-repeat（不要平铺）时：

<style>
        body{
            background-image: url('002.jpg');
            background-repeat:no-repeat;
        }

    </style>

Web学习历程（七）
其余几个属性值再次就不一一展示，感兴趣的话可以自己试一下不同平铺的效果。

4、background-position属性

这里推荐阅读CSS 背景位置 background-position属性这篇博客，该篇博客对background-position属性讲述的十分详细，博主太菜，因此推荐这篇博客，供大家一起学习。不再赘述。

5、background-attachment 属性

background-attachment:scroll; 设置背景图片是否固定。属性值可以是：

fixed（背景就会被固定住，不会被滚动条滚走）。
scroll（与fixed属性相反，默认属性）

很简单的小属性，感兴趣的同学可以试试，这里也同样不在描述

6、背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。
背景颜色的简写属性为 “background”:

举例：

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：

	background-color:red;
	background-image:url(1.jpg);
	background-repeat:no-repeat;
	background-position:100px 100px;
	background-attachment:fixed;

当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

如果你想学习更多关于背景属性的操作，在这里推荐翻阅这篇文章，这里有更多关于背景的操作，如同时设置多个背景，渐变等等。

*每天进步一点，以后工资就越多一点~~~~！*

上一篇：【黑马前端—CSS基础】背景

下一篇：利用swagger导出项目HTML和PDF离线api文档,解决pdf中文不全问题