當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3-图片

發布時間：2024/1/17 CSS 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 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> </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-width: 700px){.modal-content {width: 100%;} } </style> </head> <body><h2>圖片模態框</h2><img id="myImg" src="images/1.jpg" alt="檢察院" width="300" height="200"> <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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS3-图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

图片