CSS背景图像

最新推荐文章于 2024-07-21 19:13:42 发布

覆东流

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量135

点赞数 3

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_41807399/article/details/138291821

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

定义背景图像

background-image：属性值是指定背景图像的相对地址或绝对地址。格式可以是GIF，JPG和PNG
GIF与JPG支持透明图像。

设置渐变背景

linear-gradient:使用线性渐变创建背景图像
radial-gradient：使用镜像渐变创建背景图像

repeating-linear-gradient：使用重复线性渐变创建背景图像
repeating-radial-gradient：使用重复径向渐变创建背景图像

linear-gradient属性值：[position||angle]，[start-color]，····，[last-color];
position：定义渐变起始点，包含数值，百分比，也可以使用关键字。left、center、right定义x轴坐标；top center bottom指定y轴坐标，指定一个值时，另一个默认为center。需要与to一起使用
angle：定义直线渐变角度。单位有deg（度，一圈360deg），grad（梯度，90度=100grad），rad（弧度，一圈=2*PI rad）
start-color：定义起始渐变颜色，有两个参数，第一个参数是任意颜色值，第二个参数是颜色的未知，取值是百分比或数值，可以省略
last-color：定义最终渐变颜色，与start-color用法一样

radial-gradient属性值：[shape] [size]at [position],start-color,····，last-color；
shape：定义镜像渐变的形状：circle圆形，ellipse椭圆，默认椭圆
size：定义原的半径或者椭圆长度，或者是固定值；
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边；
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边；
closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-conner（默认）：指定径向渐变的半径长度为从圆心到离心最远的角。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.s1{
				width: 300px;
				height: 30px;
				background-image: linear-gradient(to top,red,yellow);
			}
			.s2{
				width: 300px;
				height: 30px;
				background-image: linear-gradient(45deg,red,green,yellow);
			}
			.s3{
				width: 300px;
				height: 300px;
				background-image: radial-gradient(circle 50px at 40% 40%,red,blue,yellow);
			}
		</style>
	</head>
	<body>
		<div class="s1"></div><br />
		<div class="s2"></div><br />
		<div class="s3"></div><br />
	</body>
</html>