相关疑难解决方法(0)

所以我最近碰到了这个:http://www.nicalis.com/index.php

我很好奇:有没有办法用较小的图像做这种事情？我的意思是,它是像素艺术,而不是使用每个像素大小翻两番的图像,我们不能用代码拉伸它们吗？所以我开始尝试实现它.

我尝试过CSS,Javascript甚至HTML,但都没有.它们都非常糟糕(如下所示:http://jsfiddle.net/nUVJt/2/),这让我想到了一个问题:你可以在没有任何抗锯齿的情况下在浏览器中拉伸图像吗？

我对任何建议持开放态度,无论是使用画布,jQuery,CSS3还是其他什么.

谢谢您的帮助!

编辑:现在有更好的方法来做到这一点!一种稍微不那么强硬的方式!这是魔术:

.pixelated {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

这将阻止所有现代浏览器中的抗锯齿.它甚至可以在IE7-8中工作,但不会在9中工作,我不知道有什么办法在9中做到这一点,不幸的是(除了下面概述的画布黑客).与JS相比,用这种方式做得多快得多.以下是有关这些内容的更多信息:https://developer.mozilla.org/en-US/docs/CSS/Image-rendering

EDIT2:因为这还不是官方规范,所以它不太可靠.Chrome和FF似乎都停止支持它,因为我写了上面的内容(根据下面提到的这篇文章),这真的很烦人.在我们真正开始在CSS中使用它之前,我们可能还需要等待几年,这真的很不幸.

最终编辑:现在有一种官方方式可以做到这一点!有一个叫做的新房产image-rendering.这是CSS3规范.支持现在非常不稳定,但Chrome只是增加了支持,所以在不久之后我们就能说出来image-rendering: pixelated;并且它可以在所有地方工作(yaayy常青浏览器!)

当我将775 x 775图像添加到fabricjs画布并将其调整为大约90 x 90时,图像会大大降低其质量.

但是如果我将相同的图像添加到一个<img/>并将其缩小,它就会保留其质量.

为什么画布图像质量如此之低？如何使画布图像保持原始质量<img/>？

我有一个position:relative带有position:absolute红色克隆的绿色环:before和覆盖它们的position:absolute白色克隆:after(因为它们位于同一个地方并具有相同的大小).

问题是:它在测试的两个浏览器(Chrome和Firefox)上都会出现问题,我仍然可以看到白色蒙版下的绿色/红色环.让绿色环overflow:hidden部分修复除去外部流血的问题; 但内部出血边界仍然存在.

为什么会发生这种情况,我怎么能完全隐藏下面的圆圈呢？

Codepen

body {
  background: lavender;
}

#ring {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid green;
}

#ring:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border: 50px solid red;
  border-radius: 50%;
}

#ring:after {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 50px solid …

我试图扩大css精灵像素艺术图像,并希望完全禁用抗锯齿/图像平滑.

根据这篇文章:缩放图像时禁用抗锯齿我尝试了以下css

image-rendering: optimizeSpeed;            
image-rendering: -moz-crisp-edges;         
image-rendering: -o-crisp-edges;           
image-rendering: -webkit-optimize-contrast; 
image-rendering: optimize-contrast;       
-ms-interpolation-mode: nearest-neighbor;   

它的工作方式与我想要的一样,但是在Chrome和IE浏览器中它有点帮助,但仍然会出现一些图像插值/平滑/抗锯齿.

我不想使用canvas元素,而只是坚持使用CSS背景图像sprite.

有没有办法在其他浏览器中实现与"-moz-crisp-edges"相同的结果？