CSS - CSS3 pixelate点背景

Question

是否有可能或是否有一个技巧使背景像素图像附加图像？

我使用的是背景图像,但正如您所看到的那样,它不会缩放,并且会在页面滚动时闪烁.

现在我感谢vlcekmi3的CSS:

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

但我无法让它完全像图像.有人可以查一下吗？

任何代码,资源,教程和建议表示赞赏.

Answer 1

来自thirtydot在第一篇文章中的评论.应该发布它作为答案 - 很棒.我差点错过了.请评价他的评论:)我只是发布这个作为答案,所以它可能会帮助别人,因为它帮助了我.

使用base64编码的消息:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);

http://jsfiddle.net/thirtydot/v7T98/3/

Answer 2

这是我能想出的最符合你形象的.它是根据Lea Verou的例子改编的.非css3浏览器的后备是什么？

body {
    background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(45deg, transparent 75%, #666 75%), 
        -moz-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
    background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
        -webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(45deg, transparent 75%, #666 75%), 
        -o-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
        linear-gradient(-45deg, #666 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #666 75%), 
        linear-gradient(-45deg, transparent 75%, #666 75%);
    -moz-background-size: 2px 2px;
    background-size: 2px 2px;
    -webkit-background-size: 2px 2.1px; /* override value for webkit */
    background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

jsfiddle的例子

Answer 3

您观察到的"闪烁"不是软件问题,而是硬件问题.基本上,这是因为屏幕上的像素不能立即改变颜色.由于您的虚线背景由交替的像素行组成,因此每当您向下滚动奇数个像素时,屏幕在图案的两个移位副本之间切换时会有短暂的时刻,这将显示为闪烁.

平面设计堆栈交换中的这个主题具有相同效果的更具戏剧性的示例,并且还解释了为什么它更详细地发生.为了快速演示,让我借用Volker Siegel的答案中的一张图片:

请注意,在大多数屏幕上,此图像在滚动时会显示明显的"脉冲"效果.(即使只是看着它,它也可能看起来有点闪烁,只是因为你眼中的光感受器也有一些响应延迟和适应效果.)

无论如何,滚动时可以阻止点缀背景闪烁的唯一方法是使其不滚动. 幸运的是,有一个CSS属性就是这样:

background-attachment: fixed;

除此之外,没有其他的东西.实际渲染背景的最佳方法几乎可以肯定是使用简单的双色PNG图像.您甚至可以使图像半透明,以便您可以将其分层放在不同颜色的背景上.请参阅下面的代码段进行演示:

body {
  background-color: white;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
  background-attachment: fixed;
}

<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>

请注意使用内部滚动条滚动图案时图案如何不闪烁.(当您滚动整个SO页面时,它会闪烁,因为模式会附加到<iframe>它显示的模式中,并会随之滚动.)

^{(顺便说一句,我在上面的片段中使用的内嵌图像是16×16像素,即使实际图案只有2×2像素.重复几次在文件大小方面不会花费太多,但是,并且可能会稍微安全一点,因为我似乎记得一些旧的浏览器存在非常小的背景图像问题.)}

Answer 4

这个怎么样？

.card {
  background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, #ccc;
  background-size: 5px 5px;
  
  height: 10em;
  width: 30em;
  position: relative;
}

.text {
  font-size: 2em;  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="card">
  <div class="text">
    Hello world!
  </div>
</div>

一般来说，公式是

// color
$bg-color: #fff;
$dot-color: $gray-darker;

// Dimensions
$dot-size: 3px;
$dot-space: 5px;

background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
background-size: $dot-space $dot-space;

如所见@ https://codepen.io/edmundojr/pen/xOYJGw