CSS 图片
本章节将为大家介绍如何使用 CSS 来布局图片。
圆角图片
img{border-radius:8px;}img{border-radius:50%;}缩略图
我们使用
border
属性来创建缩略图。
img{border:1px solid #ddd;border-radius:4px;padding:5px;}<img src="paris.jpg"alt="Paris">a{display:inline-block;border:1px solid #ddd;border-radius:4px;padding:5px;transition:0.3s;}a:hover{box-shadow:00 2px 1px rgba(0, 140, 186, 0.5);}<a href="paris.jpg"><img src="paris.jpg" alt="Paris"></a>响应式图片
响应式图片会自动适配各种尺寸的屏幕。
实例中，你可以通过重置浏览器大小查看效果:
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：
img{max-width:100%;height:auto;}提示: Web 响应式设计更多内容可以参考 CSS 响应式设计教程 。
图片文本
如何定位图片文本:
实例
尝试一下:
卡片式图片
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;}图片滤镜
CSS
filter
属性用为元素添加可视效果 (例如：模糊与饱和度) 。
注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。
img{-webkit-filter:grayscale(100%);/* Chrome, Safari,Opera */filter:grayscale(100%);}提示: 访问 CSS 滤镜参考手册 查看更多内容。
响应式图片相册
.responsive{padding:0 6px;float:left;width:24.99999%;}@media only screen and(max-width: 700px){.responsive{width:49.99999%;margin:6px0;}}@media only screen and (max-width: 500px){.responsive{width:100%;}}图片 Modal(模态)
本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
// 获取模态窗口varmodal = document.getElementById('myModal');// 获取图片模态框，alt 属性作为图片弹出中文本描述varimg =document.getElementById('myImg');varmodalImg = document.getElementById("img01");varcaptionText = document.getElementById("caption");img.onclick =function(){modal.style.display ="block";modalImg.src = this.src;modalImg.alt = this.alt;captionText.innerHTML = this.alt;}// Get the <span> element that closes the modalvarspan =document.getElementsByClassName("close")[0];// When the user clickson <span> (x), close the modalspan.onclick =function() {modal.style.display ="none";}