原始网址:http://www.w3schools.com/css/css3_images.asp
翻译:
CSS 图片(CSS Images)
学习使用 CSS 如何样式化图片。
圆角图片(Rounded Images)
使用 border-radius 属性创建圆角图片:
img {
border-radius: 8px;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<p>Use the border-radius property to create rounded images:</p>
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
img {
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<p>Use the border-radius property to create circled images:</p>
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
缩略图(Thumbnail Images)
使用 border 属性创建缩略图。
Thumbnail Image:
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris">
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p>Use the border property to create thumbnail images:</p>
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Thumbnail Image as Link:
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);
}
<a href="http://www.w3schools.com/css/paris.jpg">
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris">
</a>
<!DOCTYPE html>
<html>
<head>
<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>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>
<a target="_blank" href="http://www.w3schools.com/css/paris.jpg"> <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300"></a>
</body>
</html>
响应式图片(Responsive Images)
响应式图片将自动调整以适应屏幕大小。
调整浏览器窗口以查看效果:
<!DOCTYPE html>
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Images</h2>
<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
</body>
</html>
如果你想让一张图片向下拉伸,但是,拉伸尺寸又不想超过原有大小,可添加以下代码:
img {
max-width: 100%;
height: auto;
}
提示:请从 CSS RWD Tutorial 阅读更多有关响应式 web 设计的内容。
图片居中(Center an Image)
要让图片在页面内居中,使用 margin: auto;,再使之成为 block 元素:
img {
display: block;
margin: auto;
width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" style="width: 50%">
</body>
</html>
图片文本(Image Text)
如何在图片上定位文本:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<div class="container">
<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topleft">Top Left</div>
<div class="topright">Top Right</div>
<div class="bottomleft">Bottom Left</div>
<div class="bottomright">Bottom Right</div>
<div class="center">Centered</div>
</div>
</body>
</html>
Polaroid Images / Cards
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);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
<!DOCTYPE html>
<html>
<head>
<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>Responsive Polaroid Images / Cards</h2>
<div class="polaroid">
<img src="http://www.w3schools.com/css/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="http://www.w3schools.com/css/lights600x400.jpg" alt="Norway" style="width: 100%">
<div class="container"><p>Northern Lights in Norway</p></div>
</div>
</body>
</html>
图片过滤(Image Filters)
CSS filter 属性对元素添加视觉效果(如模糊度、饱和度)。
**注意:**IE、Edge 12、Safari 5.1 以及早期版本不支持 filter
属性。
/* 将所有图片的颜色改为黑白色(100% gray): */
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
<!DOCTYPE html>
<html>
<head>
<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>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
<img src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
提示:浏览 CSS filter Reference 以学习更多有关 CSS filters 的内容。
Responsive Image Gallery
CSS 可被用于创建 image galleries 。本例使用 media queries 在不同的屏幕尺寸上重布图片。调整浏览器窗口大小以查看效果:
.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%;
}
}
<!DOCTYPE html>
<html>
<head>
<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>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://www.w3schools.com/css/img_fjords.jpg"> <img src="http://www.w3schools.com/css/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="http://www.w3schools.com/css/img_forest.jpg"> <img src="http://www.w3schools.com/css/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="http://www.w3schools.com/css/img_lights.jpg"> <img src="http://www.w3schools.com/css/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="http://www.w3schools.com/css/img_mountains.jpg"> <img src="http://www.w3schools.com/css/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;">
<p>
This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will
show four images side by side, for screens smaller than 700px, it
will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).
</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
</body>
</html>
提示:在 CSS RWD Tutorial 可阅读更多有关响应式 web 设计的内容。
Image Modal (Advanced)
本例将演示 CSS 和 JavaScript 如何一起工作。
首先,使用 CSS 创建模态框(对话框),默认隐藏。
然后,当用户点击图片的时候,使用 JavaScript 显示模态框并且呈现模态框内的图片:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>
We use JavaScript to trigger the modal and to display the
current image inside the modal when it is clicked on. Also note that
we use the value from the image's "alt" attribute as an image caption text inside the modal.
</p>
<p>
Don't worry if you do not understand the code right away. When
you are done with CSS, go to our JavaScript Tutorial to learn more.
</p>
<img id="myImg" src="http://www.w3schools.com/css/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>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
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;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>