imej CSS
Imej CSS
Bab ini akan memperkenalkan cara menggunakan CSS untuk reka letak imej.
Imej sudut bulat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
img {
border-radius: 20px;
}
</style>
</head>
<body>
<h2>圓角圖片</h2>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</body>
</html>Jalankan program dan cuba
Imej bujur:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>橢圓形圖片</h2>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</body>
</html>Jalankan program dan cuba
Lakaran kenit
Kami menggunakan atribut sempadan untuk mencipta lakaran kenit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h2>縮略圖</h2>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</body>
</html>Jalankan program dan cuba
Kami menggunakan sifat sempadan untuk mencipta lakaran kecil. Tambahkan pautan di luar imej.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>縮略圖作為連接</h2>
<p>我們使用 border 屬性來創(chuàng)建縮略圖。在圖片外層添加一個鏈接。</p>
<p>點擊圖片查看效果：</p>
<a target="_blank" href="/upload/course/000/000/006/580b170b612ba140.jpg">
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Paris" width="400" height="300">
</a>
</body>
</html>Jalankan program dan cuba
Imej responsif
Imej responsif akan menyesuaikan diri secara automatik Didatangkan dengan skrin pelbagai saiz. Jika anda perlu menskalakan imej secara bebas, dan saiz imej yang diperbesarkan tidak lebih besar daripada saiz maksimum asalnya, anda boleh menggunakan kod berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>響應式圖片</h2>
<p>響應式圖片會自動適配各種尺寸的屏幕。</p>
<p>通過重置瀏覽器大小查看效果:</p>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Norway" width="1000" height="300">
</body>
</html>Jalankan atur cara untuk mencubanya
Modal Imej (modal)
Contoh ini menunjukkan cara menggabungkan CSS dan JavaScript untuk memaparkan imej bersama-sama.
Pertama, kami menggunakan CSS untuk mencipta tetingkap modal (dialog), yang disembunyikan secara lalai.
Kemudian, kami menggunakan JavaScript untuk memaparkan tetingkap modal Apabila kami mengklik pada imej, imej akan dipaparkan dalam tetingkap timbul:
Instance<. ??>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</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>圖片模態(tài)框</h2>
<p>本實例演示了如何結合 CSS 和 JavaScript 來一起渲染圖片。</p><p>
首先，我們使用 CSS 來創(chuàng)建 modal 窗口 (對話框), 默認是隱藏的。<p>
<p>然后，我們使用 JavaScript 來顯示模態(tài)窗口，當我們點擊圖片時，圖片會在彈出的窗口中顯示：</p>
<img id="myImg" src="/upload/course/000/000/006/580b170b612ba140.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>
// 獲取模態(tài)窗口
var modal = document.getElementById('myModal');
// 獲取圖片模態(tài)框，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> 元素，設置關閉模態(tài)框按鈕
var span = document.getElementsByClassName("close")[0];
// 點擊 <span> 元素上的 (x), 關閉模態(tài)框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>Jalankan program dan cuba
