CSS 图片
CSS 图片
一、圆角图片
img { border-radius: 8px; }
二、缩略图
border 属性来创建缩略图。
img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } <img src="paris.jpg" alt="Paris">
三、响应式图片
响应式图片会自动适配各种尺寸的屏幕。
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：
img { max-width: 100%; height: auto; }
四、图片文本
（1）左上角：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { position: relative; } .topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <div class="container"> <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="topleft">左上角</div> </div> </body> </html>
效果：
（2）右上角：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { position: relative; } .topright { position: absolute; top: 8px; right: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <div class="container"> <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="topright">右上角</div> </div> </body> </html>
效果：
（3）左下角：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { position: relative; } .bottomleft { position: absolute; bottom: 8px; left: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <div class="container"> <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="bottomleft">左下角</div> </div> </body> </html>
效果：
（4）右下角：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { position: relative; } .bottomright { position: absolute; bottom: 8px; right: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <div class="container"> <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="bottomright">右下角</div> </div> </body> </html>
效果：
（5）居中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container { position: relative; } .center { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 18px; margin-top:-9px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <div class="container"> <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="center">居中</div> </div> </body> </html>
效果：
五、卡片式图片
div.polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } img {width: 100%} div.container { text-align: center; padding: 10px 20px; }
效果：
六、图片滤镜
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。
/*修改所有图片的颜色为黑白 (100% 灰度)*/ img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。
七、响应式图片相册
.responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } }
效果：
八、图片 Modal(模态)
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
// 获取模态窗口 var modal = document.getElementById('myModal'); // 获取图片模态框，alt 属性作为图片弹出中文本描述 var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; modalImg.alt = this.alt; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }
九、示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS教程</title> <style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes zoom { from {transform: scale(0.1)} to {transform: scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } </style> </head> <body> <h2>图片模态框</h2> <p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p> 首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p> <p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p> <img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <script> // 获取模态窗口 var modal = document.getElementById('myModal'); // 获取图片模态框，alt 属性作为图片弹出中文本描述 var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; modalImg.alt = this.alt; captionText.innerHTML = this.alt; } // 获取 <span> 元素，设置关闭模态框按钮 var span = document.getElementsByClassName("close")[0]; // 点击 <span> 元素上的 (x), 关闭模态框 span.onclick = function() { modal.style.display = "none"; } </script> </body> </html>
效果：
