Home >Web Front-end >HTML Tutorial >css笔记_html/css_WEB-ITnose
css笔记_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:20:481133browse
背景图片自适应
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>
元素自适应居中于网页
<!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" 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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：[css] css3 中的新特性加强记忆_html/css_WEB-ITnoseNext article：怎么让手机浏览器和微信焦点在文本输入框时不自动放大页面_html/css_WEB-ITnose