Image CSS
Images CSS
Ce chapitre présentera comment utiliser CSS pour mettre en page des images.
Image aux coins arrondis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>Exécutez le programme et essayez-le
Image ovale?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>Exécutez le programme et essayez-le
Vignette
Nous utilisons l'attribut border pour créer des vignettes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>Exécutez le programme et essayez-le
Nous utilisons la propriété border pour créer des vignettes. Ajoutez un lien en dehors de l'image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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)建縮略圖。在圖片外層添加一個(gè)鏈接。</p>
<p>點(diǎn)擊圖片查看效果：</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>Exécutez le programme et essayez-le
Images réactives
Les images réactives s'adapteront automatiquement Livré avec des écrans de différentes tailles. Si vous devez redimensionner librement l'image et que la taille agrandie de l'image n'est pas supérieure à sa taille maximale d'origine, vous pouvez utiliser le code suivant?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>響應(yīng)式圖片</h2>
<p>響應(yīng)式圖片會(huì)自動(dòng)適配各種尺寸的屏幕。</p>
<p>通過重置瀏覽器大小查看效果:</p>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" alt="Norway" width="1000" height="300">
</body>
</html>Exécutez le programme pour l'essayer
Image Modal (modal)
Cet exemple montre comment combiner CSS et JavaScript pour restituer des images ensemble.
Tout d'abord, nous utilisons CSS pour créer une fenêtre modale (bo?te de dialogue), qui est masquée par défaut.
Ensuite, nous utilisons JavaScript pour afficher la fenêtre modale Lorsque nous cliquons sur l'image, l'image sera affichée dans la fenêtre pop-up?:
Instance<. ??>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>本實(shí)例演示了如何結(jié)合 CSS 和 JavaScript 來一起渲染圖片。</p><p>
首先，我們使用 CSS 來創(chuàng)建 modal 窗口 (對(duì)話框), 默認(rèn)是隱藏的。<p>
<p>然后，我們使用 JavaScript 來顯示模態(tài)窗口，當(dāng)我們點(diǎn)擊圖片時(shí)，圖片會(huì)在彈出的窗口中顯示：</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> 元素，設(shè)置關(guān)閉模態(tài)框按鈕
var span = document.getElementsByClassName("close")[0];
// 點(diǎn)擊 <span> 元素上的 (x), 關(guān)閉模態(tài)框
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>Exécutez le programme et essayez-le
