css - 如何在一个 CSS 声明中创建不重叠的多个背景，以便显示两端的透明度？

Question

我在 CSS 中有一个 div，用于显示一段胶带。

问题是中间的背景重叠出现在胶带的两端，所以胶带两端应该有的透明度div没有了。

这是我的 CSS。

.tape {
background-image: url(../graphics/tapeleft.png), url(../graphics/taperight.png), url(../graphics/tapemiddle.png);
background-repeat: no-repeat, no-repeat, repeat;
background-position: left, right, center;

font-size: 1.05em;
height:32px;
min-width:75px;
line-height:32px;
text-align:center;
border:0 solid #000000;
margin:0;
padding: 0;
display:inline-block;

color: black;
}

.tape span { padding-left:16px; padding-right:16px; }

在将三个背景放在一个 div 中的同时，如何阻止中间背景出现在两端的背景之下？我已尝试使用 background-clip 和 background-origin，但无法正常工作。

Answer 1

您需要为重复图像使用伪元素，因为您不能同时为其设置开始和结束偏移量。

body {
  background-color: magenta;
}

.tape {
  position: relative;
  background-image: url('http://i.imgur.com/vVnpGzx.png'),
                    url('http://i.imgur.com/Po3AT0u.png');
  background-repeat: no-repeat;
  background-position: left, right;
  font-size: 1.05em;
  height: 32px;
  min-width: 75px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
  color: black;
}
.tape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;               /*  start offset  */
  right: 8px;              /*  end offset    */
  height: 100%;
  background: url('http://i.imgur.com/7aGUUgo.png') center;
  z-index: -1
}

.tape span {
  padding-left: 16px;
  padding-right: 16px;
}

<div class="tape">
  <span>$60 annual revenue</span>
</div>