使用纯色边框和透明 png 创建 css 个嘈杂边框

Question

在制作网站时，我经常使用透明 png（f.i。使用 http://www.noisetexturegenerator.com/ 创建）使设计看起来更加真实、真实。

现在，我正在做一个也大量使用边框的设计，所以我想知道是否可以用同样的方式添加纹理。（i.o.w。定义实心边框并用 png 覆盖它（png 是透明的，因此它必须适应先前指定的纯色））

据我所知，border-image 不能以这种方式完成，因为浏览器会忽略纯色。（我最好不要为此设置固定颜色的边框图像）

这项工作也可以使用嵌套的 div 来完成，但那样会减少语义，我将不得不修改一些 Joomla 视图。

此外，假设我有一个 100x100 像素的 png（与背景相同），我将如何设置它以使其不调整大小并保持比例或边框出现一些意外的过渡（例如由于模式错位）

无论如何，有其他人的建议吗？（css 嘈杂的边界）

Answer 1

你可以使用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.

，您也不必担心意外转换

Answer 2

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

如果背景是图片，background-clip 会有所帮助。 http://codepen.io/gc-nomade/pen/vEemqP

这两个示例都依赖透明边框和背景图像中设置的嘈杂图案。

使用纯色边框和透明 png 创建 css 个嘈杂边框

Create css noisy borders with a solid border color and transparent png

css

noise

border-image