常用图片处理
一.多背景
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 500px; 9 height:500px; 10 border: 1px solid purple; 11 background:url("D:/照片大全/我女神/時裝.jpg") no-repeat center center,url("D:/照片大全/我女神/陽光明媚.jpg") 150px 0 repeat; 12 background-size:30% 30%,20% 20%; 13 } 14 </style> 15 </head> 16 <body> 17 <!-- 18 多背景 19 在css3中,可以設置多背景,中間通過,隔開,不止可以設置基礎樣式,還可以設置背景尺寸,同樣用,隔開 20 --> 21 <div></div> 22 <span>美到極致!</span> 23 </body> 24 </html>二.rgb
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 600px; 9 margin: 0 auto; 10 text-align: center; 11 font-size:150px; 12 background:url("D:/照片大全/四大美女/西施.jpg"); 13 color: rgba(234,234,0,0.5); 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 19 css3中任何顏色都可以用rgba來表示 20 其中a代表透明度:數值在0~1之間,數值越小,透明度越高 21 --> 22 <div>果子</div> 23 </body> 24 </html>三.background-size
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 400px; 9 height: 400px; 10 border: 1px solid purple; 11 background:url("D:/照片大全/四大美女/西施.jpg") no-repeat; 12 /*background-size: 200px 200px;*/ 13 /* 400*80%=320px */ 14 /* background-size: 80%;*/ 15 /*background-size: cover;*/ 16 background-size: contain; 17 18 } 19 </style> 20 </head> 21 <body> 22 <!-- 23 多背景 24 background-size: 25 1.具體的數值 26 background-size: 200px 200px; 27 第一個值表示x軸的值 第二個值表示縱坐標的值 28 如果只有一個值表示x軸的值,縱坐標的值縮放或者拉伸 29 2.百分比 30 按盒子大小計算圖片尺寸 31 3.cover 32 填滿整個盒子,未顯示圖片的其它區域不管 33 4contain 34 完整顯示圖片,未填滿的盒子區域不管 35 --> 36 <div></div> 37 </body> 38 </html>?
?四.圓角
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 border:1px solid purple; 11 margin: 0 auto; 12 border-radius: 100px 100px/100px 100px; 13 /* 斜杠前面代表左上和左下水平半徑,斜杠后面代表右上和右下垂直半徑*/ 14 } 15 </style> 16 </head> 17 <body> 18 <!-- 19 圓角的實質:水平半徑和垂直半徑 20 --> 21 <div></div> 22 </body> 23 </html>?
轉載于:https://www.cnblogs.com/zjm1999/p/10145601.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： 企业项目开发--企业中的项目架构以及多环
- 下一篇： 详解 IOC