css - 透明度头痛

Question

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

html 示例（jsfiddle）

如您所见，我有一个活动箭头，其目的是沿着内容列循环。但是，我想要标题背景的透明度，而不是删除我的白色背景时的内容。

是否有任何技巧可以通过我的内容背景来达到我的标题的背景？

我制作了一个额外的图像以获得更好的视图：

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

Answer 1

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

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

Answer 2

您可以使用 css3 旋转属性检查此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