CSS 图像样式

CSS图像样式

了解如何使用CSS设置图像样式。

圆角图像

使用border-radius属性创建圆角图像：

img {
                  border-radius: 8px;
                }

尝试一下

img {
                  border-radius: 50%;
                }

尝试一下

缩略图图片

使用border属性可以创建缩略图图像。缩略图图片：

img {
                  border: 1px solid #ddd;
                  border-radius: 4px;
                  padding: 5px;
                  width: 150px;
                }

尝试一下

缩略图图片为链接：

img {
                  border: 1px solid #ddd;
                  border-radius: 4px;
                  padding: 5px;
                  width: 150px;
                }

                img:hover {
                  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
                }

尝试一下

响应式图像

响应式图像将自动调整以适应屏幕大小。调整浏览器窗口大小以查看效果：

img {
                  max-width: 100%;
                  height: auto;
                }

尝试一下

居中形象

要使图像居中，请将左右边距设置为auto并使其成为block元素：

img {
                  display: block;
                  margin-left: auto;
                  margin-right: auto;
                  width: 50%;
                }

尝试一下

宝丽来图像/卡片

五渔村

北极光

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;
                }

尝试一下

透明图像

opacity属性可以取0.0 - 1.0的值。值越低，越透明：注意： IE8及早期使用filter:alpha(opacity=x)。x可以取0到100之间的值。较低的值使元素更透明。不透明度0.2:

不透明度0.5:

不透明度1: 默认

img {
                  opacity: 0.5;
                  filter: alpha(opacity=50); /* For IE8 and earlier */
                }

尝试一下

图像文字

左上角

右上角

左下角

右下角

.topleft {
          position: absolute;
          top: 8px;
          left: 16px;
        }
        .topright{
          position: absolute;
          top: 8px;
          right: 16px;
        }
        .bottomleft{
          position: absolute;
          bottom: 8px;
          left: 16px;
        }
        .bottomright{
          position: absolute;
          bottom: 8px;
          right: 16px;
        }

尝试一下

图像过滤器

opacity属性可以取0.0 - 1.0的值。值越低，越透明： CSS filter属性为元素添加了视觉效果（如模糊和饱和度）。注意： Internet Explorer，Edge 12或Safari 5.1及更早版本不支持filter属性。

img {
                  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
                  filter: grayscale(100%);
                }

尝试一下

图像悬停叠加

.container1 {
            position: relative;
            width: 50%;
        }

        .container1 .image {
            display: block;
            width: 100%;
            height: auto;
        }

        .container1 .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: #008CBA;
        }

        .container1:hover .overlay {
            opacity: 1;
        }

        .container1 .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }

尝试一下

翻转图像

img:hover {
                  -webkit-transform: scaleX(-1);
                  transform: scaleX(-1);
                }

尝试一下

响应式图库

CSS可用于创建图像库。此示例使用媒体查询来重新排列不同屏幕尺寸的图像。调整浏览器窗口大小以查看效果：

div.gallery {
                  border: 1px solid #ccc;
                }
                div.gallery:hover {
                  border: 1px solid #777;
                }
                div.gallery 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;
                }

尝试一下

图像模态（高级）

这是一个演示CSS和JavaScript如何协同工作的示例。首先，使用CSS创建模态窗口（对话框），并默认隐藏它。然后，当用户点击图像时，使用JavaScript显示模态窗口并在模态内显示图像：

// 获得模态
                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;
                  captionText.innerHTML = this.alt;
                }

                // 得到 span 元素，该元素关闭模态
                var span = document.getElementsByClassName("close")[0];

                // 当用户点击<span>(x)，关闭模态
                span.onclick = function() { 
                  modal.style.display = "none";
                }

尝试一下