Question

我正在尝试创建类似于此网站的效果。（链接在......下方），其显示旋转为菱形的正方形div，并且再次旋转背景以显示直线图像，并且对bg图像赋予视差效果。 http://www.aleeforoughi.com/index.html 根据我的研究，可能的技巧是变换三角形及其bg图像。

我知道如何使用stellar.js进行视差但是，我被困在旋转背景图像。我从其中一个网站学到的技巧是使用伪元素。我现在的知识有限。（我得到了这个技巧的网站） http://www.sitepoint.com/css3-transform-background-image/ 请查看我尝试的代码

.parallax-two {
    height:800px;
    width:800px;
    display:block;
    position:relative;
    overflow:hidden;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.parallax-two:before {
    content:;
    position: absolute;
    width: 100px;
    height: 200px;
    z-index:5;
    background:url(../img/custom12.jpg) no-repeat fixed;
    background:#000000;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

它形成菱形，但未显示背景图像。你能帮助我吗...我真的很感激。

感谢。

如何在css中转换背景图像和div

0 个答案: