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/post/7690.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知