透明头痛

Question

我刚制作了一张图片，为您提供了一个理解我的问题的视觉示例。

html example (jsfiddle)

正如您所看到的，我有一个活跃的箭头，其目的是沿着内容列循环。但是，我希望标题背景中的透明度，而不是删除我的白色背景时的内容。

是否有任何技巧可以在我的内容背景中刻录以达到标题的背景？

我制作了一张额外的图片以获得更好的视野：

注意：我使用图案作为背景，而不是纯色。

Answer 1

我最初的想法是内容区域的背景，其中有一个透明的三角形。 然后对内容应用负边距然后将内容的位置设置为relative并将其top属性设置为负数，并将标题的底部填充设置为相同量。

类似的东西？ http://jsfiddle.net/sT53s/

Answer 2

您可以使用css3 rotate属性检查此http://jsfiddle.net/TgWMH/18/

<强> HTML

<div class="arrow three"></div>

<强> CSS

.arrow.three:after {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") repeat scroll 0 0 transparent;
    content: "";
    height: 200px;
    left: -14px;
    position: absolute;
    top: 0;
    width: 200px;
}
.arrow.three {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    background: none repeat scroll 0 0 transparent;
    height: 100px;
    margin-top: -51px;
    overflow: hidden;
    position: relative;
    width: 100px;
}

Answer 3

CSS3多背景版本

只要您的内容区域始终具有纯色背景，您就可以使用以下修改：

.header {
  height: 200px;
  background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

通过添加fixed，您可以确保使用背景图像的其他位置，它应该正确对齐。然后是这个修改：

.arrow2 {
  margin-top: -2px;
  width: 111px;
  height: 56px;
  background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0,
    url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

然后你需要做的就是反转你的arrow2.png，使箭头区域本身是透明的，箭头的外侧部分包含你内容的背景颜色。

显然，这只适用于支持多种背景的浏览器。

CSS2单背景版

考虑到这一点，因为我的大脑今天相当缓慢......没有理由 使用多个背景。您可以像这样使用箭头标记：

<div class="arrow2">
  <div class="arrow-inner"></div>
</div>

然后将4170671240_a90769d747.jpg固定背景应用于.arrow2，但将实际的arrow2.png背景应用于.arrow-inner。这样您就不必为旧浏览器制作任何例外，因为它应该可以正常工作。

.arrow2 {
  margin-top: -2px;
  width: 111px;
  height: 56px;
  background: url("http://farm3.staticflickr.com/2665/4170671240_a90769d747.jpg") fixed;
}

.arrow-inner {
  width: 111px;
  height: 56px;
  background: url("http://s17.postimage.org/5iq6rsz0b/arrow2.png") no-repeat 0 0;
}

arrow2.png仍然需要反转才能使其正常工作 - 因此箭头区域是透明的而外部不是

Answer 4

这是一个相当古老的帖子但是检查这个代码笔解决了两个伪元素的问题。它是一个sass mixin，你可以为你喜欢的每个边缘，宽度和三角形位置配置它。 http://codepen.io/gionkunz/pen/ihgwH