Question

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

我尝试过使用边框创建三角形（阻挡身体的背景图像），使用各种旋转，在实际背景图像和背景渐变之间使用的替换。

现在我基本上使用的是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问题，但正如你所看到的，它在每个浏览器中做了不同的事情，这很奇怪。

我没有看到任何其他网站做这种事情，使用固定的背景图像，在元素内，提供“舷窗”风格的视图。我有兴趣看到任何人都知道的，检查他们如何处理类似的事情。

编辑：只是为了澄清我认为是导致这种情况的原因。通常固定的背景图像是相对于窗口的，而不是它所分配的元素。旋转该元素后，背景图像就会变得相对于它。这很可能是一个浏览器错误，我只想确定。

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

有很多手工制作的位置;可能这可以更容易地设置变换起源。

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

为什么这个CSS三角形不能很好地与固定的背景图像一起使用？

1 个答案:

fiddle