4-4、CSS3背景与渐变

最新推荐文章于 2024-07-25 22:03:21 发布

鸵鸟大师

最新推荐文章于 2024-07-25 22:03:21 发布

阅读量103

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_30754745/article/details/104853519

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

4-4、CSS3背景与渐变

css3背景

区域、定位、大小、图像、整合

background-clip：border-box | padding-box | content-box:指定背景绘制区域
在这里插入图片描述

background-origin：border-box | padding-box | content-box
指定background-position属性应该是相对位置。
简单可以理解为偏移时，设定左上角的起始点位置，是内容左上角还是边框外角还是外边距外角。

backgroud-size：length | percentage | cover | contain ;
指定背景图片的大小。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
设置单个100%时，背景图片宽度为div宽度的100%，高度为默认auto。
双100% 100%时，填充满。
设置单个50%时，背景图片宽度为div宽度的50%，高度为默认auto。
700px时，宽度为700px，高度auto。

多重背景图像：允许为元素使用多个背景图像。
background-image: url(img1.jpg),url(img2.jpg);
在这里，是重叠的，前面的图会遮住后边的图，可以在前面使用半透明图。越靠前，图层越在上边。

背景属性的整合：背景缩写属性可以在一个声明中设置所有的背景属性。
最好按照这个顺序写，不太建议整合写，可以分开，颜色、url、位置一起，其他单独。
在这里插入图片描述
css3渐变：线性渐变、径向渐变。
渐变可以在两个或多个指定二点颜色之间显示平稳的过渡。

线性渐变：background: linear-gradient(direction,color1,color2, ...);
属性：方向，颜色1，颜色2，…
默认方向是从上到下
从左到右：background: linear-gradient(to right,red,yellow,blue);
从右到左：background: linear-gradient(to left,red,blue);
对角：background: linear-gradient(to right bottom,red,blue);
这里注意兼容性，各个浏览器不同，写法有所差异。这里示例用的是统用写法。

也可以使用角度，进而控制，方向变成了角度，其他不变，这里不用考虑兼容性。
background: linear-gradient(angle,color1,color2, ...);
在这里插入图片描述
background: linear-gradient(20deg,red,blue);

多个颜色的控制：
background: linear-gradient(90deg,red 0%,blue 20%,yellow 30%,green 100%);
这里的百分之，是到达总体的百分之多少。最后一个的值不写，默认是100%。如果不足100%，那么后边是纯色。

透明色的渐变也是可以的：
background: linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));

重复线性渐变：
background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);
这里只写到了20%，后边会不停的重复以上。

径向渐变：从起点到终点，颜色从内到外进行圆形渐变（从中间向外拉）。
background: radial-gradient(center,shape size,color1,color);
圆心位置，形状（渐变的尺寸），尺寸大小关键字，颜色1，颜色2，…
不设置圆心位置就是默认center中心，形状圆形。
注意，大小和形状中间是没有逗号的，如果加上逗号，语法错误。

background: radial-gradient(red 50%,blue 70%);
这里的50%，是指中心点到角的长度的50%，因为这是圆形，半径。如果设置了形状，那就是另一种情况。
在这里插入图片描述