CSS3-图片
?圓角圖片
?? img?{
????border-radius:?8px;
}
? 縮略圖(用boder屬性來創建)
img?{
????border:?1px solid #ddd;
????border-radius:?4px;
????padding:?5px;
}
?響應式圖片
???????? img?{
????max-width:?100%;
????height:?auto;
}
圖片文本
.container {position: relative;}
.topleft {position: absolute; top: 8px; left: 16px; font-size:18px;}
img { width: 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> <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-width: 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>?
轉載于:https://www.cnblogs.com/minchao/p/6088758.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： 几何画板度量三角形的步骤
- 下一篇： CSS魔法堂：深入理解line-heig