html - 在 CSS 中重复具有任意偏移量的背景

标签 html css

嗯,我想知道我们是否可以在 CSS 中使用任意偏移量重复背景?从那我的意思是我们可以在每次渲染它时“移动”一个平铺 x 和 y 像素吗?用例可以是马赛克、图案和很多东西,甚至可以使用它来实现等距平铺。

例如,如果我有一个 10px x 10px 的图 block

每次重复瓷砖时,我想将它从顶部移动 10 像素,所以我将实现的是

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

那么有没有现成的解决方案,或者 Canvas 只是可行的方法(在 canvas 中完成,然后将其用作背景)

最佳答案

从 CSS3 开始,这不能仅使用 CSS 样式来完成。重复图案在 x(水平)方向、y(垂直)方向、两个方向同时出现或两者都不是(单个图像)上呈周期性。

引用:http://www.w3.org/TR/css3-background/#backgrounds

关于html - 在 CSS 中重复具有任意偏移量的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17189731/

相关文章:

CSS div 圆 Angular

javascript - 灯箱弹出窗口中的多步表单

css - 图像 slider 不能很好地使用 css

java - map 信息窗口中的文本颜色没有改变

css - SASS 嵌套结构搞乱了@media 查询的优先级

c# - 删除多余的行 ASP.Net

html - 将鼠标悬停在一个 HTML 元素上会影响另一个

html - 导航栏中药丸的样式

html - 如何使 div 有 2 行最大行并获得省略号?

javascript - 当我使用 bootstrap 4 时,为什么粘性 header 在表单标签中不起作用?