美文网首页前端杂货随记我爱编程
image-rendering 像素化图像像素(实验中)

image-rendering 像素化图像像素(实验中)

作者: 程序蜗牛 | 来源:发表于2018-04-10 07:11 被阅读13次

    image-rendering 提供一个提示,关于算法应使用缩放图像浏览器。

    该属性适用于元素本身,以及元素的其他属性中提供的任何图像。它对未缩放的图像没有影响。例如,如果图像的自然尺寸是100×100像素,但页面作者将其尺寸指定为200×200px(或50×50px),则图像将使用指定算法放大(或缩小)到新尺寸。由于用户交互(缩放),缩放也可能适用。

    语法

    auto | crisp-edges | pixelated

    /* Keyword values */
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    
    /* Global values */
    image-rendering: inherit;
    image-rendering: initial;
    image-rendering: unset;
    

    auto默认值,应使用最大化图像外观的算法来缩放图像。特别地,“平滑”颜色的缩放算法是可接受的,例如双线性插值。这适用于照片等图像。从版本1.9(Firefox 3.0)开始,Gecko使用双线性重采样(高质量)。

    crisp-edges必须使用保留图像中的对比度和边缘的算法来缩放图像,并且不会在处理中使图像变得光滑或模糊。这是用于图像,如像素艺术。

    pixelated当向上缩放图像时,必须使用“最近邻居”或类似的算法,以便图像看起来由大像素组成。缩小时,这与“自动”相同。

    optimizeQualityoptimizeSpeed存在于早期草案(并从其SVG对应未来)定义为同义词的auto值。

    实例DEMO-1

    DEMO点击查看地址

    .image-cons-1 img:nth-child(3){
        width: 350px;
      }
      .image-cons-1 ul{
        maging: 0;padding: 0;
        overflow: hidden;
      }
      .image-cons-1 ul li{
        float: left;
        list-style: none;
        padding: 0 10px;
      }
      .image-cons-1 ul li input{
        vertical-align: middle;
      }
    
    <div style="padding:0 30px 30px 30px;">
        <h3>选择查看对比效果</h3>
        <div class="image-cons-1">
          <img src="./assets/images/pixel-art-small.png" alt="">
          <ul>
            <li>
              <input type = "radio" name = "imageRender" id = "auto" value = "auto" checked = "checked" @click="changeTab" />
              <label for = "auto">auto</label>
            </li>
            <li>
              <input type = "radio" name = "imageRender" id = "renderPixelated" value = "pixelated" @click="changeTab" />
              <label for = "renderPixelated">pixelated</label>
            </li>
            <li><input type = "radio" name = "imageRender" id = "crispEdges" value = "crisp-edges" @click="changeTab" />
              <label for = "crispEdges">crisp edges</label></li>
          </ul>
          <img src="./assets/images/pixel-art-small.png" :style = "{'image-rendering': valueStr}" alt="">
        </div>
      </div>
    

    效果

    image.png

    实例DEMO-2

    DEMO点击查看地址

    body{
        --size: 50px;
      }
      .image-cons {
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 80px;
        background: rgba(180,160,120,.1);
        position: relative;
      }
    
      input[type="range"] {
        position: absolute;
        top: 30px;
        left: 10px;
        width: calc(100% - 20px);
        background: #ccc;
        -webkit-appearance: none; /*去除默认样式*/
        height: 10px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
      }
    
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;/*去除默认样式*/
        cursor: default;
        top: 0;
        height: 20px;
        width: 20px;
        transform: translateY(0px);
        background: #fff;
        border-radius: 15px;
        border: 5px solid #006eb3;
      }
    
      img {
        width: var(--size);
        margin: 10px;
      }
    
      img:nth-child(2) {
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
      }
    
    <div style="padding:0 30px 30px 30px;">
        <h3>滑动观察放大之后的对比效果</h3>
        <div class="image-cons">
          <img src="./assets/images/pixel-girl-head.png" alt="">
          <img src="./assets/images/pixel-girl-head.png" alt="">
          <input type="range" min="20" max="500" value="50" v-on:input="changeInput">
        </div>
      </div>
    
    image.png

    兼容性:

    浏览器支持

    image.png

    参考资料:

    原文blog

    image-rendering

    MDN: image-rendering

    css-tricks:image-rendering

    相关文章

      网友评论

        本文标题:image-rendering 像素化图像像素(实验中)

        本文链接:https://www.haomeiwen.com/subject/lnnwhftx.html