Question

我希望此页面底部的三角形形状为纯色，没有透明度。这很容易实现吗？我只是不确定要针对哪个元素。

这是我的JSFiddle：http://jsfiddle.net/webtiki/fcLkW/9/

和我的代码：

CSS

 html, body{
    height: 100%;
    margin:0;
}
.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-45deg);
    transform : rotate(-45deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(45deg);
    transform : rotate(45deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}
video{
    min-width:100%;
    min-height:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0;
    z-index:10;
    opacity:0.5;
}

HTML

<div class="out">
    <div class="in"></div>
    <video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
                <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
                <source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
            </video>
</div>

有人可以协助吗？

非常感谢任何指示： - ）

Answer 1

我想我得到了你想要的东西。使用此代码更改CSS代码（JSFiddle code）：

html, body{
    height: 100%;
    margin:0;
}
.out{
    height:100%;
    position:relative;
    overflow:hidden;
}
.in{
    height:75%;
    background-color:#6C2223;
}
.out:before, .out:after, .in:after{
    content:'';
    position:absolute;
    bottom:25%;
    width:100%;
    height:700%;
    background-color:#9A4445;
}
.out:before{
    right:50%;

    z-index:20;

    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;

     -webkit-transform : rotate(-135deg);
    transform : rotate(-135deg);
}
.out:after{
    left:50%;

    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;

    -webkit-transform : rotate(315deg);
    transform : rotate(315deg);
}
.in:after{
    bottom:0;
    width:100%;
    height:25%;
    background-color:#911618;
    z-index:-1;
}
video{
    min-width:100%;
    min-height:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0;
    z-index:10;
    opacity:0.5;
}

Answer 2

您所做的就是将视频作为顶部元素，并降低不透明度以显示其背后的项目。

您需要做的是在底部和左/右形状上更改以下2个值。

z-index: 20;
opacity: 0.5;

执行此操作后，虽然底部1是整个块，但它覆盖整个视频，可能需要重新考虑您的形状，或使用图像叠加。

http://jsfiddle.net/fcLkW/21/

Answer 3

您只需将三角形设置为顶层，因为现在块“DIV.inn”位于视频下方，您可以通过透明视频看到它。

更改您的代码，如：

<强> CSS

.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
z-index:1000;

}

在CSS元素上设置不透明度

3 个答案: