image-rendering属性(CSS设置)
image-rendering属性(CSS设置)
image-rendering提供一个提示,关于算法应运用缩放图画浏览器。css
该属性适用于元素自己,以及元素的其余属性中提供的任何图画。它对未缩放的图画没有影响。例如,若是图画的天然尺度是100×100像素,但页面做者将其尺度指定为200×200px(或50×50px),则图画将运用指定算法扩大(或缩小)到新尺度。因为用户交互(缩放),缩放也可能适用。html
语法
auto|crisp-edges|pixelatedweb
/*Keywordvalues*/image-rendering:auto;image-rendering:crisp-edges;image-rendering:pixelated;/*Globalvalues*/image-rendering:inherit;image-rendering:initial;image-rendering:unset;
auto默许值,应运用最大化图画外观的算法来缩放图画。特别地,“平滑”颜色的缩放算法是可接受的,例如双线性插值。这适用于相片等图画。从版别1.9(Firefox3.0)开始,Gecko运用双线性重采样(高质量)。算法
crisp-edges必须运用保留图画中的对比度和边缘的算法来缩放图画,并且不会在处理中使图画变得润滑或含糊。这是用于图画,如像素艺术。浏览器
pixelated当向上缩放图画时,必须运用“最近街坊”或类似的算法,以便图画看起因由大像素组成。缩小时,这与“自动”相同。app
optimizeQuality和optimizeSpeed存在于前期草案(并从其SVG对应将来)定义为近义词的auto值。ide
实例DEMO-1
DEMO点击检查地址svg
.image-cons-1img:nth-child(3){width:350px;}.image-cons-1ul{maging:0;padding:0;overflow:hidden;}.image-cons-1ulli{float:left;list-style:none;padding:010px;}.image-cons-1ulliinput{vertical-align:middle;}
<divstyle="padding:030px30px30px;">
选择检查对比作用
<divclass="image-cons-1">
"./assets/images/pixel-art-small.png"alt="">
"radio"name="imageRender"id="auto"value="auto"checked="checked"@click="changeTab"/>
for="auto">auto
"radio"name="imageRender"id="renderPixelated"value="pixelated"@click="changeTab"/>
for="renderPixelated">pixelated
"radio"name="imageRender"id="crispEdges"value="crisp-edges"@click="changeTab"/>
for="crispEdges">crispedges
"./assets/images/pixel-art-small.png":style="{'image-rendering':valueStr}"alt="">
div>
div>
作用flex
image.png
实例DEMO-2
DEMO点击检查地址spa
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:5pxsolid#006eb3;}img{width:var(--size);margin:10px;}img:nth-child(2){image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;}
<divstyle="padding:030px30px30px;"><h3>滑动调查扩大以后的对比作用h3><divclass="image-cons"><imgsrc="./assets/images/pixel-girl-head.png"alt=""><imgsrc="./assets/images/pixel-girl-head.png"alt=""><inputtype="range"min="20"max="500"value="50"v-on:input="changeInput">div>div>
作品标签: CSS
优秀作品:
最新作品:
评论列表(共184人参与)参与讨论或分享设计作品获得视觉癖积分奖励
也是一种言注册会员
2021-09-20 9:23:55
如果抓不住旧韶光的影子,咱们就能够浅笑的看着往昔,咱们总要放下一样东西才干取得另一样,朝夕与四季,还有诗与远方。 希望作用看上去愈加天然,因此挑选石材装饰现代精约电视墙是不错的挑选,如人工文化石,作为一种新式石材资
回复,发现好注册会员
2021-09-20 14:50:51
图 1.一辈游客
2021-09-20 13:29:4
游客75432:image-rendering属> 零基础学绘画的软件
回复,所以自注册会员
2021-09-20 23:9:37
度。因为用户交互(缩放),缩放也可能适用。html 语法 ">
回复