css3背景图尺寸和背景渐变

时间：7年前阅读：5859

1、背景图尺寸

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#box{    
				width: 900px;    
				height: 600px;    
				border: 1px solid blue;    
				margin: 0 auto;    
				background: url(t04.jpg) no-repeat; /*背景图  url('t04.jpg')   也可以这样写,加两个''单引号,效果都是一样的*/    
				background-size: 100% 100%;   /*background-size设置图片大小*/    
			}    
		</style>    
	</head>    
	<body>    
		<div id="box">    
		</div>    
	</body>    
</html>

上面代码图片效果：

2、背景渐变

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			#box{    
				width: 500px;    
				height: 400px;    
				margin: 100px auto;    
				border: 1px solid darkgreen;    
				/*浏览器前缀: 火狐  -moz   谷歌  -webkit-  欧朋(opera) -o-    IE -ms-   */		
    
/*background: -webkit-linear-gradient(left,yellow,blue,red);*/  /*left 从左边开始,yello 从黄色开始渐变,blue 变成蓝色 ; red 再渐变成红色*/    
background: -webkit-linear-gradient(top left,yellow,blue,red);   /*top left  左上角开始渐变*/    
			}    
		</style>    
	</head>    
	<body>    
		<div id="box"></div>    
	</body>    
</html>

上面代码图片效果：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3背景图尺寸和背景渐变

网友评论