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:
    forest
    不透明度0.5:
    forest
    不透明度1: 默认
    forest
    img {
                      opacity: 0.5;
                      filter: alpha(opacity=50); /* For IE8 and earlier */
                    }
    
    尝试一下
  • 图像文字

    Cinque Terre
    左上角
    右上角
    左下角
    右下角
    .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";
                    }
    
    尝试一下
  • 相关页面

    HTML教程:HTML样式