通过重复较小的图像来创建相框

Question

我已经开始使用名为cropper.js的图书馆开展图像处理和图像裁剪的应用。现在，我的任务是调查并可能实现一项功能，该功能可以拍摄裁剪后的图像并创建图片框架外观的直观表示。

实施例：

不同之处在于，我无法使用已存储的图像，但必须使用一个如下所示的图像构建此类图像：

除此之外，我必须以45度角切割图像片的一侧，以便能够再现所需的效果。

怎么会这样做呢？我想过在所有四个方面重复几次这样的图像，然后以45度角切割图像的远端部分，但不知道如何去做：（

谢谢！

Answer 1

使用纯CSS的最简单方法是利用multiple-backgrounds使用2个图像的主帧，一个垂直，另一个是水平。

对于角落，您只需要一个透明45度切割方形纹理的图像，该纹理将用于4个div，每个div翻转transform: scale()并使用{{1}定位到两侧}

position: absolute;

.picframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    url('http://i.stack.imgur.com/wyp42.png'), /* top */
    url('http://i.stack.imgur.com/wyp42.png'), /* bottom */
    url('http://puu.sh/q3NmA/48c4271f4f.jpg'), /* left */
    url('http://puu.sh/q3NmA/48c4271f4f.jpg'); /* right */
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-position: top left, bottom left, top left, top right;
}

.picframe [class^="corner"] {
  background: url(http://i.imgur.com/W0Be4ra.png) no-repeat;
  height: 62px; width: 62px;
  position: absolute;
}

.picframe .corner-t-l {
  top: 0;
  left: 0;
}

.picframe .corner-t-r {
  top: 0;
  right: 0;
  transform: scale(-1,1);
}

.picframe .corner-b-l {
  bottom: 0;
  left: 0;
  transform: scale(1,-1);
}

.picframe .corner-b-r {
  bottom: 0;
  right: 0;
  transform: scale(-1,-1);
}

<强>优点：

• 易于实施
• 响应
• 最小代码

<强>缺点：

• 可能不是最准确的
• 需要创建3张图片：vertical，horizontal，corner
• 需要了解框架尺寸（角落高度/宽度）

如果单件纹理是您唯一的选项，那么您可以使用CSS变换（90度旋转或使用负标度镜像<div class="picframe"> <div class="corner-t-l"></div> <div class="corner-t-r"></div> <div class="corner-b-l"></div> <div class="corner-b-r"></div> </div>为主框架（顶部，底部，左侧，右侧）翻转背景）。

角落有点复杂，可以通过制作一个旋转45度的div并且内部有一个子或伪选择器来反转父旋转然后应用背景，然后用scale(1,-1)隐藏多余部分来完成在父角容器上：

overflow: hidden

:root {
  --frame-size: 160px;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

[class^="frame"] {
  background: url("https://i.gyazo.com/6836b6d12cebf4b0fd9a2758ad3a04a9.png");
  position: absolute;
  /*outline:1px solid rgba(255,0,0,0.5);*/
}

.frame--top,
.frame--bottom {
  width: 100%;
  height: var(--frame-size);
  top: 0;
  left: 0;
}

.frame--bottom {
  top: auto;
  bottom: 0;
  transform: scale(1, -1);
}

/* optional shading for realism */
.frame--top::after,
.frame--bottom::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: RGBA(0, 0, 0, 0.1);
  box-shadow: inset 0px 10px 50px rgba(0, 0, 0, 0.25);
}

.frame--left,
.frame--right {
  height: var(--frame-size);
  width: calc( 100vh - (var(--frame-size)*2));
  z-index: 1;
  bottom: 0;
  left: 0;
  transform-origin: 0% 0%;
  transform: rotate(-90deg);
}

.frame--right {
  bottom: var(--frame-size);
  right: var(--frame-size);
  left: auto;
  transform-origin: bottom right;
  transform: rotate(90deg);
}

[class^="frame--corner"] {
  height: calc(var(--frame-size)* 1);
  width: calc(var(--frame-size) * 1.425);
  background: inherit;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: 1;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

[class^="frame--corner"]::before {
  content: '';
  position: absolute;
  background: inherit;
  height: 100%;
  width: 100%;
  transform: rotate(-135deg);
  right: 0;
  top: -50%;
}

.frame--corner--tr,
.frame--corner--br {
  right: 0;
  left: auto;
  transform: rotate(-45deg);
  transform-origin: 100% 0%;
}

.frame--corner--tr::before,
.frame--corner--br::before {
  transform: rotate(135deg);
}

jsFiddle：https://jsfiddle.net/azizn/cb7feu5p/2/

<强>优点：

• 单张图像（纹理）
• 响应
• 帧大小可以是动态的

<强>缺点：

• 可能不是最准确的
• 更多的代码和8个HTML标记

为了使其作为纯CSS工作，许多计算使用CSS变量（<div class="frame--top"> <div class="frame--corner--tl"></div> <div class="frame--corner--tr"></div> </div> <div class="frame--bottom"> <div class="frame--corner--bl"></div> <div class="frame--corner--br"></div> </div> <div class="frame--left"></div> <div class="frame--right"></div>），请务必检查CSS变量，变换和--frame-size表达式的浏览器兼容性。否则，您将需要通过JavaScript运行所有这些操作。

Answer 2

您可以使用border-image属性，它应该完全适用于您尝试做的事情。它将使用图像的角落作为角落，并将拉伸或重复其间的内容。您也可以正常定义每个边框的边框宽度。

这种方法的优点是它可以像任何普通边框一样工作，因此不用担心缩放或保持内容总是相同的大小，它会根据内容很好地适应。

这就是代码的样子，不包括额外的代码以获得完整的浏览器支持：

border-image: url("border.png") 27 fill repeat;

这里有一些方便的浏览器支持链接＆amp;指南：

http://caniuse.com/#search=border-image（我认为部分支持问题与您的案例无关，只要您使用简写）

https://css-tricks.com/understanding-border-image/

这个网站可以很容易地从图像中定义边框，因为手动计算它可能有点痛苦： http://border-image.com/