圆角图片
img {
border-radius: 8px;
}
缩略图(用boder属性来创建)
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
响应式图片
img {
max- 100%;
height: auto;
}
图片文本
.container {position: relative;}
.topleft {position: absolute; top: 8px; left: 16px; font-size:18px;}
img { 100%; height: auto;opacity: 0.3;}
图片滤镜
img {
-webkit-filter: grayscale(100%); /* Chrome,
Safari, Opera */
filter: grayscale(100%);
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片</title> </head> <body> <style> #image img{ border-radius: 8px; width:400px; height: 300px; } #image1 img { border: 1px solid #ddd; border-radius: 5px; padding: 5px; width:400px; height: 300px; } #image2{ width: 800px; } #image2 img { max-width: 100%; height: auto; } /*文字图片*/ .container { position: relative; } .topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; } .container img { width: 100%; height: auto; /*opacity: 0.3;*/ } /*图片滤镜*/ #image3 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } </style> <h2>圆角图片</h2> <p>使用 border-radius 属性来创建圆角图片:</p> <!-- 圆角 --> <div id="image"> <img src="images/1.jpg" alt="Paris"> </div> <!-- 缩略图 --> <div id="image1"> <img src="images/1.jpg" alt="Paris"> </div> <!-- 响应式 --> <div id="image2"> <img src="images/1.jpg" alt="Paris"> </div> <!-- 文字 --> <div class="container"> <img src="images/1.jpg" alt="Norway"> <div class="topleft"><a href="">左上角</a></div> </div> <div id="image3"> <img src="images/1.jpg" alt="Paris"> </div> <!-- 图片滤镜 --> </body> </html>
图片模态框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片模态框</title> <style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* 模态框 */ .modal { display: none; /*默认隐藏 */ position: fixed; /* 固定布局 */ z-index: 1; /*最上层 */ padding-top: 100px; /* 内框距上100px */ left: 0;/*离左边是0*/ top: 0;/*离上边是0*/ width: 100%; /* 宽度*/ height: 100%; /* 高度设置 */ overflow: auto; /* 超出部分显示滑轮 */ background-color: rgb(0,0,0); /* 背景色 */ background-color: rgba(0,0,0,0.9); /* 透明度 */ } /* M模态框内容 */ .modal-content { margin: auto; display: block; width: 80%; max-width: 900px; } /* */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* 动画 */ .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- 700px){ .modal-content { width: 100%; } } </style> </head> <body> <h2>图片模态框</h2> <img id="myImg" src="images/1.jpg" alt="检察院" 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>