CSS3设计背景.docx

1、CSS3设计背景一、 设计背景多背景逗号分开background: url(a.jpg) 0 0, url(b.jpg) 0 100%;.boxwidth:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;二、 背景尺寸background-size:x ybackground-size:100% 100% 刚好放满整个元素body background:#ccc;.boxwidth:300px;height:300px;border:10px solid #00

2、0; background:url(miaov.jpg) no-repeat; background-size:100% 100%;Cover 放大 把整个元素放满body background:#ccc;.boxwidth:300px;height:300px;border:10px solid #000; background:url(miaov.jpg) no-repeat; background-size:cover;背景图片会有超出Contain 缩小 把背景图片放完body background:#ccc;.boxwidth:300px;height:300px;border:10

3、px solid #000; background:url(miaov.jpg) no-repeat; background-size:contain;body background:#ccc;.boxwidth:300px;height:300px;border:10px solid #000; background:url(miaov.jpg) no-repeat, url(miaov2.jpg) no-repeat 0 bottom; background-size:contain,100px 100px;三、 定义背景坐标background-origin ： border | pad

4、ding | content border-box： 从border区域开始显示背景。 从边框的最外面开始，只是边框线显示在上层padding-box： 从padding区域开始显示背景。 bodybackground:#ccc;.boxwidth:200px;height:200px;background:url(miaov.jpg) no-repeat 0 0; border:10px solid rgba(0,0,0,0.5);padding:50px; background-origin:padding-box;content-box： 从content区域开始显示背景。bodybac

5、kground:#ccc;.boxwidth:200px;height:200px;background:url(miaov.jpg) no-repeat 0 0; border:10px solid rgba(0,0,0,0.5);padding:50px; background-origin:content-box;四、 background-clipborder： 从border区域向外裁剪背景。 padding： 从padding区域向外裁剪背景。 content： 从content区域向外裁剪背景。 没有设置background-clip 边框透明显示出背景图片.boxwidth:3

6、00px;height:300px;background:url(miaov.jpg);border:30px solid rgba(0,0,0,0.5);padding:50px; background-clip:content-box;no-clip： 从border区域向外裁剪背景。背景图片文字效果.boxwidth:300px;height:300px;background:url(miaov.jpg) center;border:30px solid rgba(0,0,0,0.5); -webkit-background-clip:text;padding:50px; font:bo

7、ld 120px/150px 微软雅黑; text-align:center;color:rgba(0,0,0,0); transition:1s;.box:hover background-position:-200px -200px;妙味课堂鼠标移上，改变背景图片的位置，达到显示图片背景的动画效果Iphone开机动画bodybackground:#000; text-align:center; font:50px/200px 微软雅黑;h1 display:inline-block;color:rgba(255,255,255,0.3); background:-webkit-linear

8、-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,1) 240px,rgba(255,255,255,0) 300px) -300px 0 no-repeat; -webkit-background-clip:text;MioaV妙味课堂var oH1=document.getElementsByTagName(h1)0;var oTimer=null;var iLeft=-300;document.title=0;function toMove() oTimer=setI

9、nterval(function() iLeft+=10; if(iLeft=1000) iLeft=-300; clearInterval(oTimer); oH1.style.backgroundPosition=iLeft+px 0px; ,20);toMove();setInterval(function() toMove(); ,5000);五、 遮罩Mask-imageMask-positionMask-repeat.boxwidth:800px;height:600px; background:url(miaov.jpg) no-repeat;background-size:100% 100%;border:10px solid #000; -webkit-mask:url(mask.png) no-repeat; transition:1s;.box:hover-webkit-mask-position:100% 100%;