重复背景与CSS中的任意偏移 [英] Repeating A background with arbitary offset in CSS

问题描述

好吧，我想知道我们是否可以用CSS中的任意偏移重复背景？从那我的意思是我们可以移动瓦x和y像素每次它的渲染呢？

Well, I am wondering if we can repeat a background with an arbitary offset in CSS ? From that i mean can we "Shift" a tile x and y pixel everytime its rendering it ? The uses cases could be mosiacs, patterns and a lot of stuff, Even isometric tiling can be achieved using so.

例如，如果我有一个10px x 10px的瓷砖

For example if i have a tile of 10px x 10px

每次瓷砖重复时，我想从顶部移动10px，所以我将实现

Each time the tile is repeated i want to shift it 10px from top so what i will achieve is

[//]
    [//] 
        [//]
            [//]

所以有任何现存的解决方案，或者是Canvas的方式去（在画布上做，然后用它作为背景）

So is there any existant solution or is Canvas just the way to go ( Do it in canvas and then use it as a background )

推荐答案

从CSS3开始，这不能只使用CSS样式。重复模式在x（水平）方向，y（垂直）方向，同时在两个方向上都是周期性的，或者不是（单个图像）。

As of CSS3, this can't be done using only CSS styling. Repeated patterns are periodic either in the x (horizontal) direction, y (vertical) direction, both directions simultaneously, or neither (single image).

参考： http://www.w3.org/TR/css3-background/#backgrounds

这篇关于重复背景与CSS中的任意偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！