CSS 圖片
CSS 圖片
本章節(jié)將為大家介紹如何使用 CSS 來佈局圖片。
圓角圖片
<!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>執(zhí)行程式嘗試
橢圓形圖片:
<!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>執(zhí)行程式嘗試
縮圖
我們使用?border?屬性來建立縮圖。
<!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>執(zhí)行程式嘗試一下
我們使用 border 屬性來建立縮圖。在圖片外層新增一個(gè)連結(jié)。
<!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>執(zhí)行程式嘗試一下
響應(yīng)式圖片
響應(yīng)式圖片會(huì)自動(dòng)適搭配各種尺寸的螢?zāi)?。如果你需要自由縮放圖片，且圖片放大的尺寸不大於其原始的最大值，則可使用以下程式碼：
<!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>執(zhí)行程式嘗試
圖片Modal(模態(tài))
本實(shí)例示範(fàn)如何結(jié)合CSS 和JavaScript 來一起渲染圖片。
首先，我們使用 CSS 來建立 modal 視窗 (對(duì)話框), 預(yù)設(shè)是隱藏的。
然後，我們使用JavaScript 來顯示模態(tài)窗口，當(dāng)我們點(diǎn)擊圖片時(shí)，圖片會(huì)在彈出的視窗中顯示：
實(shí)例
<!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>執(zhí)行程式嘗試
