用纯CSS实现模块化高度的div（高度为100px的倍数）

Question

我有一个带有重复背景的div。背景图片的大小为50像素x 50像素。

由于重复图像高度为50像素，因此我希望

的高度为50的倍数。这将确保背景图像被重复使用，但不会被

的边缘截断。

1. 是否有一种纯CSS的方法可以在没有媒体查询的情况下实现这一点？
2. 是否可以使用媒体查询来实现这一点？
3. 我知道使用JavaScript是可能的，但我宁愿不使用它（有很多具有这种样式的对象，而且不想对它们进行$.each()操作）。

- circusdei

---

这个重复的背景是什么样子的？ - ayyp

重复了x和y，因此宽度也存在相同的问题。红色织物图案。 - circusdei

有没有办法将其缩小或制作成流体模式，这样即使被切断也不会影响它？我想不出/找不到一种定义CSS高度的多个方法，所以似乎JavaScript是最好的选择。 - ayyp

我很担心这个。看起来应该实现一下。CSS4什么时候出来？ :) - circusdei

同意！关于定义比例的一些事情似乎没有得到任何支持，但我找不到关于高度的任何信息。在类似LESS这样的东西中可能是可能的，但除此之外我怀疑它。 - ayyp

Answer 1

目前实现此效果的唯一方法是使用CSS中已经实现的border-image，但它不会完全按照您的要求工作。 您无法将元素大小设置为50px的倍数，而应调整50px组件的比例，以适应元素。

操作步骤如下：使用现有背景图像的九个瓷砖制成一个150px x 150px的图像，然后指定类似于以下规则的规则：

border-image: url(bg.png) 50 round fill;

round这个关键词表示图像的中间部分将重复并拉伸以适应元素。这只有在将元素的最小尺寸设置为至少150px平方时才能实际起作用。在实践方面，支持程度有些不稳定，我认为任何浏览器都还没有实现当前的规范。使用特定于供应商的属性时可以省略fill关键字。

除此之外，CSS3线网格模块允许将元素的大小设置为行高的倍数，但是对于实现还有很长的路要走。

- robertc