Question

在制作网站时，我经常使用透明的png（用http://www.noisetexturegenerator.com/创建的f.i.）来为设计提供更实质的外观。

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

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

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

此外，假设我有一个100x100px png（与背景相同），我将如何设置它以使其不调整大小并保持比例或边框获得一些意外的转换（如由于错位而导致的虚线图案）

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

Answer 1

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

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

透明边框上的示例继电器和背景图像中设置的噪声模式。

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，则也不必担心意外转换。

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

2 个答案: