3

When making websites, I often use transparent png's (f.i. created with http://www.noisetexturegenerator.com/) to give the design a more material, realistic look.

Now, I'm working on a design which also heavily uses borders, so I wondered if it was possible to add texture the same way. (i.o.w. defining a solid border and overriding it with the png (the png is transparent so it has to adapt to the previously specified solid color))

To my knowledge it can't be done this way with border-image, since browsers then ignore the solid color. (I preferably do not set a border-image with fixed color for this purpose)

The job could also be done using nested div's, but that would be less semantic and I would have to modify some Joomla views.

Additionally, assume I have a 100x100px png (same as for background), how would I have to set it so that it does not resize and keeps proportions or that the border gets some unexpected transitions (like imaginary lines due to misplacing of patterns)

Anyway, has someone else suggestions? (css noisy borders)

4

2 回答 2

2

如果想法是在 中使用纯色background，则可以通过 轻松绘制它box-shadow:inset，同时设置嘈杂的背景和透明边框以在下面看到它。http://codepen.io/gc-nomade/pen/vEemwb

如果您的背景是图像，那么background-clip将有所帮助。 http://codepen.io/gc-nomade/pen/vEemqP

这两个示例都基于背景图像中设置的透明边框和噪声模式。

于 2015-02-02T20:58:05.340 回答
0

您可以使用before或after伪元素，将图像放在原始元素上，将纯色放在伪元素上（反之亦然）。

像这样的东西（使用不透明的模式：http ://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif ）：

div {
  width: 100px;
  height: 100px;
  border-width: 24px;
  border-image: url(http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif) 24 repeat;
}
div:after {
  content: "";
  width: 100px;
  height: 100px;
  border: 24px solid rgba(0, 255, 255, .8);
  display: block;
  margin: -24px;
}
<div></div>

这样，很容易控制宽度、不透明度和定位。如果您将其设置为 ，您也不必担心意外的转换repeat。

于 2015-02-02T20:47:24.103 回答