背景圖片自適應 元素自適應居中於網頁 CSS3使圖片變灰 ...
背景圖片自適應
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>無標題文檔</title> 6 <style> 7 div { 8 position: absolute; 9 width: 100%; 10 height: 100%; 11 z-index: -1; 12 } 13 img { 14 position: fixed; 15 } 16 </style> 17 </head> 18 19 <body> 20 <div><img src="http://i.imgur.com/CrbvIYj.jpg" width="100%" height="100%"></div> 21 </body> 22 </html>
元素自適應居中於網頁
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> div { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 1px solid yellow; background-color: #F6C; } </style> </head> <body> <div></div> </body> </html>
CSS3使圖片變灰
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>test</title> 8 <style type="text/css"> 9 .gray { 10 -webkit-filter: grayscale(100%); 11 -moz-filter: grayscale(100%); 12 -ms-filter: grayscale(100%); 13 -o-filter: grayscale(100%); 14 filter: grayscale(100%); 15 filter: gray; 16 } 17 img { 18 width: 200px; 19 height: 200px; 20 } 21 </style> 22 </head> 23 <body> 24 <img src="http://i.imgur.com/CrbvIYj.jpg"> 25 <img src="http://i.imgur.com/CrbvIYj.jpg" class="gray"> 26 </body> 27 </html>
