背景图像标签及渐变

背景

在不适用img标签的情况下如何添加图片呢？

我们现在body里面写几个div标签

当然也可以写其他的标签，不过为了规范还是写div标签

并给他们添加class

浏览器打开一下，发现什么都没有

那是因为div里面没有设置参数

我们不用img添加图片，我们用background来添加图片

我们在style标签里面添加

我们先用width 和height 给div标签设置一下长和宽

然后呢，我们在给div标签上一下背景颜色，颜色为青色

在用border给他加一下框框 2px 是框的宽度，solid 是实线 red 是红色

意思是添加一个2px款的红色实线

background-image:url()

是给背景添加图片的意思

就会发现，有3个框框，线条是红色的，但是图片确实被塞满了

=====================================

我们只想要一张图片，可是这里面全部都是，那应该怎么样变成一张呢?

background-repeat:repeat-x；/*横排*/

background-repeat:repeat-y；/*竖排*/

background-repeat:no-repeat；/*只有一个*/

就会发现第一个横排

第二个竖排

第三个只有一张

位置

那么怎么移动位置呢？

div1为综合方法

div2 是拆开方法

用div1比较方便

background-size 可以调节图片的大小

渐变

https://www.grabient.com

复制链接去浏览器打开

就会出现这个界面

下面

你点击左下角的圆盘，可以进行调整渐变方向

点击左上角的图标

可以复制CSS类型的代码

去IDEA里面打开

粘贴进去

如果我们输入文字的话

就会有一格一格的

 background-color: #0093E9;
    background-image: linear-gradient(356deg, #0093E9 0%, #80D0C7 100%);