CSS背景之多背景

设置背景图片大小

background-size: 500px 500px;
取值：（1）第一个值为宽，第二个值为高。
只有一个值的话就是正方的。

<!DOCTYPE html>
<html>
<head><style type="text/css">.box{width: 800px;height: 800px;border: 1px solid red;background-image: url(pika.jpg);background-size: 500px 500px;}</style></head><body><div class="box"></div></body>
</html>

（2）background-size: cover: 将背景图片按照自己原来的缩放比，始终沾满整个父元素
(3)background-size: contain: 将背景图片按照自己原来的缩放比，始终要将自己完整的显示到父容器中

多背景

可以给一个容器同时设置多张背景图片

<!DOCTYPE html>
<html>
<head><style type="text/css">.box{width: 1000px;height: 1000px;border: 1px solid red;margin: 0 auto;/*把容器放居中*/background: url(pika.jpg) no-repeat left top,url(pika.jpg) no-repeat right top,url(pika.jpg) no-repeat left bottom,url(pika.jpg) no-repeat right bottom,url(pika.jpg) no-repeat center;}</style></head><body><div class="box"></div></body>
</html>

渐变

PhotoShop（PS）工具上有渐变工具
在这里插入图片描述
（1）线性渐变
线性渐变：（背景颜色由一种颜色向另外一种颜色渐变：开始的背景颜色到结束的背景颜色）
渐变的方向：水平或者垂直，或者通过角度表示渐变的方向
渐变的方位（可以不设置的）
重要属性 background:linear-gradient
或者background-image:linear-gradient直接用背景图片做渐变

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.line{width: 200px;height: 200px;background-image: linear-gradient(to right,red,pink)/*渐变方从左向右*/}</style>
</head>
<body>
<div class="line"></div>
</body>
</html>

在这里插入图片描述

to top:向上（从下往上）
to left ,to bottom一样的意思

通过角度表示渐变的方向

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.line{width: 200px;height: 200px;background-image: linear-gradient(120deg,red,pink)}</style>
</head>
<body>
<div class="line"></div>
</body>
</html>

120deg 120度方向渐变。一个圆360度这样理解。

行高line-height

浏览器默认文字大小16px
浏览器中的默认文字行高18px

行高=文字大小+上间距+下间距
设置行高就是改变文字的上下间距
文字字体也可以影响行高值
文字垂直居中：设置盒子的高度

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.d1{width: 400px;height: 200px;background-color: red;line-height:200px;font-size: 16px;}</style>
</head>
<body>
<div class="d1">文字</div>
</body>
</html>

在这里插入图片描述
行高单位问题
☞ px em % 不带单位

☞如果给单独一个标签设置文字行高。px：该标签中的文字行高与文字大小无关，设置行高等于多少，最后文字的行高实际大小就是多少。
em：该标签的文字行高=文字大小*设置的行高值%：该标签的文字行高=文字大小*设置的行高值

不带单位：
该标签的文字行高=文字大小*设置的行高值

☞如果给父元素设置行高，子元素中的文字行高。
父元素行高em：
子元素的行高=父元素文字大小父元素设置的行高（与子元素的文字大小无关）
父元素行高px：
子元素的行高=父元素的行高（与文字大小无关，体现了继承性）
父元素行高%：
子元素的行高=父元素文字大小父元素设置的行高（与子元素的文字大小无关）
父元素行高不带单位：
子元素的行高=子元素文字大小*父元素设置的行高值（先继承后计算）
在这里插入图片描述