css笔记_html/css_WEB-ITnose-HTML Tutorial-php.cn

css笔记_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:20:48

Original

1056 people have browsed it

背景图片自适应

 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"    style="max-width:90%"  style="max-width:90%" alt="css笔记_html/css_WEB-ITnose" ></div>21 </body>22 </html>

Copy after login

元素自适应居中于网页

<!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>

Copy after login

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" alt="css笔记_html/css_WEB-ITnose" >25 <img  src="http://i.imgur.com/CrbvIYj.jpg" class="gray" alt="css笔记_html/css_WEB-ITnose" >26 </body>27 </html>

Copy after login