css3背景图尺寸和背景渐变
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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知