背景
在不适用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%);