Div条纹背景重叠

Question

我为一个元素设置了一些padding个占位符，其中四个覆盖<div />具有不同的定位。

.top{
   position: absolute;
   left: 0;
   height: 0;
   width: 100%;
   height: {{element.paddingTop}};
}
.right{
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: {{element.paddingRight}};
}
.bottom{
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: {{element.paddingBottom}};
}
.left{
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: {{element.paddingLeft}};
}

现在我遇到以下问题：

正如您所看到的，width和height似乎不是px的确切数量，因为我没有从top {{开始定位所有元素1}}但有时来自left或bottom我有这种丑陋的重叠效果 我可以使用right来解决它，但会切断视口之外的元素 - 这样就不会解决我的问题。
我知道，我可以使用background-attachment: fixed top作为所有4个left的参考点并计算值，但我没有<div />也没有此时此元素的width。

这是一个小提琴：https://jsfiddle.net/ad51xae7/

Answer 1

确保使用background-attachment: fixed来对齐填充元素的背景图案。这是一个更新的小提琴：https://jsfiddle.net/stefanullinger/ghtkkca8/

您可以在此处找到一个更强大的示例：https://jsfiddle.net/stefanullinger/t26r9c74/

<强>更新

这是使用HTML5 canvas元素的另一种方法。 https://jsfiddle.net/stefanullinger/pjzw73am/

Answer 2

我建议你从这个样本开始

.outline {
  position: relative;
  width: 300px;
  padding: 25px;
}
.outline:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(-45deg, #19d76e 8%, transparent 8%, transparent 50%, #19d76e 50%, #19d76e 58%, transparent 58%, transparent);
  background-size: 6px 6px;
}
.outline:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background-color: #19d76e;
  color: white;
  font-size: 13px;
  padding: 1px 2px;
}

.outline div{
  position: relative;
  padding: 10px 5px;
  background: white;
}

<div class="outline" data-text="Label something">
  <div>Hey there, how does this work?</div>
</div>

2：使用边框图像的版本

图像当然可以嵌入为data:\[<mediatype>\]\[;base64\],<data>以防止额外请求

.outline{
  position: relative;
  height: 80px;
  width: 240px;
  border-image-slice: 12 12 12 12;
  border-image-width: 12px 12px 12px 12px;
  border-image-repeat: repeat repeat;
  border-image-source: url("https://mdn.mozillademos.org/files/6015/border-image-5.png");
}

.absolute {
  position: absolute;
  left: 40px;
  top: 40px;
  background: yellow;
}

<div class="absolute">
  Hey there again, better ?
</div>

<div class="outline">
</div>