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

Question

在制作网站时，我经常使用透明的png（f.I.创建http://www.noisetexturegenerator.com/)使设计更具材质和真实感。

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

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

这项工作也可以使用嵌套的div来完成，但这会缺乏语义，我必须修改一些Joomla视图。

此外，假设我有一个100x100px png（与背景相同），我必须如何设置它，以便它不会调整大小并保持比例，或者边框会出现一些意外的过渡（例如由于图案错位而导致的虚线）

不管怎样，有别人的建议吗？（css嘈杂的边界）

Answer 1

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

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

css lang-css prettyprint-override">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>

Answer 2

如果这个想法是在background中使用素色，那么它可以很容易地通过box： inset绘制，而您可以设置嘈杂的背景和透明边框以查看它下面。http://codepen.io/gc-nomade/pen/vEemwb

如果您的背景是一幅图像，则背景剪辑将有所帮助。http://codepen.io/gc-nomade/pen/vEemqP

这两个例子都依赖于背景图像中设置的透明边界和噪声模式。