JavaWeb学习之路(28)–CSS之背景详解

你的名字 2022-09-15 15:43 766阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 设置背景色
 *  3. 设置背景图片
 *  4. 背景图平铺
 *   *  4.1 不平铺
     *  4.2 水平平铺
     *  4.3 垂直平铺
     *  4.4 两个方向平铺
 *  5. 背景定位
 *  6. 背景简写
 *  7. 小结

# 1. 前言 #

之前讲了文本和字体，用来设置文字相关的样式。

本篇讲述下背景的用法，包括背景色、背景图像、背景图像的平铺方式、背景图像的定位，以及整个背景样式的简写方式。

# 2. 设置背景色 #

我们可以通过`background-color`给标签设置背景颜色，例如：

<div style="background-color: yellow;">
            <p>
                春眠不觉晓
            </p>
            <p>
                处处闻啼鸟
            </p>
            <p>
                夜来风雨声
            </p>
            <p>
                花落知多少
            </p>
        </div>

上述代码我们就为div区域设置了黄色的背景色，所以效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

# 3. 设置背景图片 #

如果觉得背景色不够好看，还可以找一张图片作为背景图，就想我们电脑或者手机的壁纸一般。

我们在images文件夹下放置一张`2.jpg`，然后通过`background-image`来设置背景图。

<div style="background-image:url(images/2.jpg);">
            <p>
                春眠不觉晓
            </p>
            <p>
                处处闻啼鸟
            </p>
            <p>
                夜来风雨声
            </p>
            <p>
                花落知多少
            </p>
        </div>

效果如下，可以发现虽然背景图显示出来了，但是重复显示了很多张，并不好看。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

# 4. 背景图平铺 #

我们可以通过`background-repeat`属性来设置背景图的平铺方式。

什么叫平铺呢，就是图像在窗口上是如何铺设的，是横向一张一张的铺，还是不平铺只展示一张图片，还是纵向的一张一张的铺。

## 4.1 不平铺 ##

可以选择让背景图不平铺，使用`background-repeat:no-repeat`即可。

<div style="background-image:url(images/2.jpg);background-repeat: no-repeat;">
            <p>
                春眠不觉晓
            </p>
            <p>
                处处闻啼鸟
            </p>
            <p>
                夜来风雨声
            </p>
            <p>
                花落知多少
            </p>
        </div>

效果如下，此时背景图只显示一张，不会重复。![6fe30d6564084d4e8e64e9c78b244753.png][]

## 4.2 水平平铺 ##

使用`background-repeat:repeat-x;`，可以设置水平平铺，效果如下：  
![在这里插入图片描述][b4e93e4f0f7f44b1bcd0011fdec8dc55.png]

## 4.3 垂直平铺 ##

使用`background-repeat:repeat-y;`，可以设置垂直平铺，效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_17_color_FFFFFF_t_70_g_se_x_16]  
注意垂直平铺，得当垂直方向的高度超出背景图高度时，才需要重复，所以我们多些了一些诗句，将高度撑的更高一些。

## 4.4 两个方向平铺 ##

如果是默认不写，则是水平、垂直方向都会平铺，效果如下：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

# 5. 背景定位 #

可以使用`background-position`改变图像在背景中的位置，例如：

<div style="background-image:url(images/2.jpg);background-repeat: no-repeat;background-position: right top;">
            <p>
                春眠不觉晓
            </p>
            <p>
                处处闻啼鸟
            </p>
            <p>
                夜来风雨声
            </p>
            <p>
                花落知多少
            </p>
        </div>

将图像位置设置为了右侧、上方，所以效果如下：  
![在这里插入图片描述][749fd2a20bfb46b281b9be0eb9acc80e.png]

# 6. 背景简写 #

背景相关的样式比较多，如果逐一写下来，还是挺费劲的，所以还有一种简写方法，如下：

<div style="background:yellow url('images/2.jpg') no-repeat right top;">
            <p>
                春眠不觉晓
            </p>
            <p>
                处处闻啼鸟
            </p>
            <p>
                夜来风雨声
            </p>
            <p>
                花落知多少
            </p>
        </div>

一个`background`样式名，同时设置了背景色、背景图、平铺方式、定位。

这种写法更简单，也更常见！

# 7. 小结 #

背景图经常会用在登录界面，选择一张大图片，当做整个界面的背景(为body标签设置背景即可)。

大家可以尝试下使用背景图设计一个好看的登录界面。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/980605dc74ae4f2d8e2d328341b09a5e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/371bd466c9e64a12b126d2438f33a30f.png
[6fe30d6564084d4e8e64e9c78b244753.png]: /images/20220828/5f121afab14b4194a01db26f3ab8ab3c.png
[b4e93e4f0f7f44b1bcd0011fdec8dc55.png]: /images/20220828/cff9f78121794064bb0483e858fff83b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/91210ed8676f415099b6b17bd3ebbada.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/7abc5a7940794eb79dcad4290f826798.png
[749fd2a20bfb46b281b9be0eb9acc80e.png]: /images/20220828/8e38aa63df8044a69c0d835c99343e1b.png