小白教程
所有教程
关于
Search
172.70.130.238
172.70.130.238
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 图片”的源代码
本页内容
上一节:
CSS3_用户界面
下一节:
CSS_按钮
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 图片}}[[Category:CSS 教程|55]] = CSS 图片 = 本章节将为大家介绍如何使用 CSS 来布局图片。 == 圆角图片 == == 圆角图片: <sample title="" desc="" lang="html" hererun="1"> img { border-radius: 8px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> == 椭圆形图片: <sample title="" desc="" lang="html" hererun="1"> img { border-radius: 50%; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> == 缩略图 == 我们使用 <code>border</code> 属性来创建缩略图。 == <sample title="" desc="" lang="html" hererun="1"> img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; } <img src="paris.jpg" alt="Paris"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> == <sample title="" desc="" lang="html" hererun="1"> 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="paris.jpg"> <img src="paris.jpg" alt="Paris"> </a> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> == 响应式图片 == 响应式图片会自动适配各种尺寸的屏幕。 实例中,你可以通过重置浏览器大小查看效果: 如果你需要自由缩放图片,且图片放大的尺寸不大于其原始的最大值,则可使用以下代码: == <sample title="" desc="" lang="html" hererun="1"> img { max-width: 100%; height: auto; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <h2>响应式图片</h2> <p>响应式图片会自动适配各种尺寸的屏幕。</p> <p>通过重置浏览器大小查看效果:</p> <img src="http://www.xiaobai.wang/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> </body> </html> </run> '''提示:''' Web 响应式设计更多内容可以参考 [[css rwd intro|CSS 响应式设计教程]]。 == 图片文本 == 如何定位图片文本: == 左下角 左上角 右上角 右下角 居中 尝试一下: [[try.php?filename=trycss_image_text_top_left|左上角 »]] [[try.php?filename=trycss_image_text_top_right|右上角 »]] [[try.php?filename=trycss_image_text_bottom_left|左下角 »]] [[try.php?filename=trycss_image_text_bottom_right|右下角 »]] [[try.php?filename=trycss_image_text_center|居中 »]] == 卡片式图片 == == <sample title="" desc="" lang="html" hererun="1"> 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; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> == 图片滤镜 == CSS <code>filter</code> 属性用为元素添加可视效果 (例如:模糊与饱和度) 。 '''注意:''' Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。 == 修改所有图片的颜色为黑白 (100% 灰度): <sample title="" desc="" lang="html" hererun="1"> img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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> '''提示:''' 访问 [[css3 pr filter|CSS 滤镜参考手册]] 查看更多内容。 == 响应式图片相册 == == <sample title="" desc="" lang="html" hererun="1"> .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%; } } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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="http://www.xiaobai.wang/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="http://www.xiaobai.wang/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="http://www.xiaobai.wang/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="http://www.xiaobai.wang/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> == 图片 Modal(模态) == 本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。 首先,我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。 然后,我们使用 JavaScript 来显示模态窗口,当我们点击图片时,图片会在弹出的窗口中显示: == <sample title="" desc="" lang="html" hererun="1"> // 获取模态窗口 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; } // 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"; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</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="http://www.xiaobai.wang/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>
返回至“
CSS 图片
”。
上一节:
CSS3_用户界面
下一节:
CSS_按钮