使用实心边框颜色和透明的PNG创建CSS噪声边框

Question

在制作网站时，我经常使用透明的png文件（例如使用http://www.noisetexturegenerator.com/创建）来使设计看起来更具材料感和现实感。

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

据我所知，不能使用border-image这种方式实现，因为浏览器会忽略实心颜色。（我最好不要为此目的设置带有固定颜色的border-image）

该任务也可以使用嵌套的div完成，但这将不太语义化，并且我需要修改一些Joomla视图。

另外，假设我有一个100x100像素的png文件（与背景相同），我需要如何设置才能使其不调整大小并保持比例或使边框出现一些意外的过渡效果（例如由于图案放置不当而出现的虚拟线条）？

总之，是否有其他人有建议？（css噪声边框）

- BracketBulldog

Answer 1

如果想要在背景中使用单一颜色，可以通过设置box-shadow:inset来轻松绘制，同时将噪点背景和透明边框设置为底部可见。如果您的背景是一个图像，则可以使用background-clip。这两个例子都依赖于在背景图片中设置透明边框和噪点图案。参考链接：http://codepen.io/gc-nomade/pen/vEemwb 和 http://codepen.io/gc-nomade/pen/vEemqP。

- G-Cyrillus

Answer 2

您可以使用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，您也不必担心意外的过渡。

- Shomz