CSS images
This chapter will introduce how to use CSS to layout images.
Rounded corner picture
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>Run instance»
Click "Run" Instance" button to view the online instance
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>Run instance»
Click the "Run instance" button View online examples
Thumbnails
We use the border attribute to create thumbnails.
Instance
<!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>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Instance
<!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 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris" width="400" height="300">
</a>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Responsive images
Responsive images will automatically adapt to screens of various sizes.
In the example, you can check the effect by resetting the browser size:
If you need to freely scale the image, and the enlarged size of the image is not larger than its size For the original maximum value, you can use the following code:
Instance
<!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="//m.sbmmt.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
</body>
</html>Run Instance»
Click "Run Instance" " button to view online examples
Tips: For more information on Web responsive design, please refer to the CSS responsive design tutorial.
Picture text
How to position picture text:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片左上角添加文本信息:</p>
<div class="container">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topleft">左上角</div>
</div>
</body>
</html>Running example »
Click the "Run Instance" button to view the online instance
##Instance
Run instance»Click the "Run instance" button to view the online instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片右上角添加文本信息:</p>
<div class="container">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topright">右上角</div>
</div>
</body>
</html>Run instance»Click the "Run instance" button to view the online instance
Instance
Run instance»Click the "Run instance" button to view the online instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片左下角添加文本信息:</p>
<div class="container">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomleft">左下角</div>
</div>
</body>
</html>Run instance»Click the "Run instance" button to view the online instance
Instance
Run Instance»Click the "Run Instance" button to view the online instance
##Instance<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片右下角添加文本信息:</p>
<div class="container">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomright">右下角</div>
</div>
</body>
</html>Run Instance»Click the "Run Instance" button to view the online instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片中间位置添加文本信息:</p>
<div class="container">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="center">居中</div>
</div>
</body>
</html>
Run instance»
Click the "Run instance" button to view the online instance
Card-style picture
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body {margin:25px;}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
<div class="polaroid">
<img src="lights600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Northern Lights in Norway</p>
</div>
</div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Picture filter
CSS filter Properties are used to add visual effects (such as blur and saturation) to elements.
Note: This attribute is not supported by Internet Explorer or Safari 5.1 (and earlier).
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Tip: Visit the CSS Filter Reference Manual for more information.
Responsive picture album
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2 style="text-align:center">响应式图片相册</h2>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="//m.sbmmt.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<h4>重置浏览器大小查看效果</h4>
</div>
</body>
</html>Run instance»
Click" Run Example" button to view the online example
Picture Modal(modal)
This example demonstrates how to combine CSS and JavaScript to render images together.
First, we use CSS to create a modal window (dialog box), which is hidden by default.
Then, we use JavaScript to display the modal window. When we click on the image, the image will be displayed in the pop-up window:
Example
<!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>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg" src="//m.sbmmt.com/wp-content/uploads/2016/04/img_lights.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>
// 获取模态窗口
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>Run Instance»
Click the "Run Instance" button to view the online instance
