首頁 > 開發者 > JavaScript
css筆記，css學習筆記
背景圖片自適應
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
