操骚逼网站,亚洲色图在线视频,91激情视频在线

image-rendering 提供一個提示，關(guān)于算法應(yīng)使用縮放圖像瀏覽器。

該屬性適用于元素本身，以及元素的其他屬性中提供的任何圖像。它對未縮放的圖像沒有影響。例如，如果圖像的自然尺寸是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默認值，應(yīng)使用最大化圖像外觀的算法來縮放圖像。特別地，“平滑”顏色的縮放算法是可接受的，例如雙線性插值。這適用于照片等圖像。從版本1.9（Firefox 3.0）開始，Gecko使用雙線性重采樣（高質(zhì)量）。

crisp-edges必須使用保留圖像中的對比度和邊緣的算法來縮放圖像，并且不會在處理中使圖像變得光滑或模糊。這是用于圖像，如像素藝術(shù)。

pixelated當向上縮放圖像時，必須使用“最近鄰居”或類似的算法，以便圖像看起來由大像素組成?？s小時，這與“自動”相同。

optimizeQuality和optimizeSpeed存在于早期草案（并從其SVG對應(yīng)未來）定義為同義詞的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>