css - 为什么这个 CSS 三 Angular 形不能很好地与固定的背景图像一起播放？

Question

示例:http://cdpn.io/EaDdx

在“示例标题”旁边，您可以看到我正在尝试创建的箭头。我试图让它以与矩形和圆形相同的方式工作，允许它充当它自己的固定背景图像的“舷窗”。

我尝试了所有方法，从使用边框创建三 Angular 形(遮挡 body 的背景图像)到使用各种旋转，在实际背景图像和背景渐变之间交替使用。

现在我基本上使用 this方法，如此:

.gradient-triangle {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: -25px;
        clip: rect(auto 25px 50px auto);
}

.gradient-triangle:after  {
        content: '';
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 9px;
        right: 0px;
        -webkit-transform:rotate(-45deg);
        background-attachment: fixed;
        background: -moz-linear-gradient(45deg, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%);
        background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(49%,#000000), color-stop(50%,#ffffff), color-stop(100%,#ffffff));
        background: -webkit-linear-gradient(45deg, #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%);
        background: -o-linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
        background: -ms-linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
        background: linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
        background-position: center center;
        background-attachment: fixed;
        border: 1px solid #fff;
}

目前这主要是 chrome 问题，但如您所见，它在每个浏览器中的作用都不同，这很奇怪。

我还没有看到任何其他网站做这种事情，在元素中使用固定的背景图像，以提供“舷窗”风格的 View 。我很想知道任何人可能知道的任何事情，看看他们如何处理类似的事情。

编辑:只是为了澄清我认为造成这种情况的原因。通常固定的背景图像是相对于窗口的，而不是它分配给的元素。一旦该元素旋转，背景图像就会相对于它。这很有可能是浏览器错误，我想确定一下。

Answer 1

我可以在 Chrome 中使用以下内容:

CSS

.filler {
    height: 2000px;
}

.test2 {
    position: absolute;
    width: 400px;
    height: 370px;
    left: 219px;
    top: 10px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position-x: -266px;
    background-position-y: -107px;
}
.container {
     -webkit-transform: rotate(45deg); 
     position: absolute;
     margin-left: -275px;
     margin-top: -116px;
     clip: rect(-265px, 693px, 0px, 428px);
}
.container2 {
     -webkit-transform: rotate(-45deg); 
     position: absolute;
}

.test {
    position: absolute;
    width: 186px;
    height: 400px;
    left: 300px;
    top: 85px;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.test, .test2 {
    background-image: url(http://placekitten.com/900/600);
}

fiddle

有很多手持位置；使用 transform-origins 可能会更容易设置。

此外，我在 Chrome(一方面)和 Firefox - IE(另一方面)中的位置有所不同。仍在努力理解为什么..