创建具有纯色边框颜色和透明 png 的 css 嘈杂边框答案

【问题标题】：Create css noisy borders with a solid border color and transparent png创建具有纯色边框颜色和透明 png 的 css 嘈杂边框
【发布时间】：2015-04-01 21:25:08
【问题描述】：

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

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

据我所知，border-image 不能这样做，因为浏览器会忽略纯色。（我最好不要为此设置具有固定颜色的边框图像）

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

另外，假设我有一个 100x100px png（与背景相同），我将如何设置它以使其不会调整大小并保持比例，或者边框会出现一些意外的过渡（例如由于错位而导致的假想线模式）

无论如何，有其他人的建议吗？（css噪点边框）

【问题讨论】：

标签： css noise border-image

【解决方案1】：

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

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

两个示例都在背景图像中设置的透明边框和嘈杂图案上中继。

【讨论】：

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

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

【讨论】：