如何将div放在响应式旋转div之上？

Question

我正试图让这个设计:

但是我遇到了徽标和漩涡的问题,我不知道如何添加它们.我尝试过绝对定位,但在调整网站大小时,徽标和漩涡最终会出现与图像正方形不同的地方.

如何添加漩涡和徽标？

JSFiddle: http ://jsfiddle.net/uHsJv/1/
当你想编辑JS小提琴时,在我网站上的images文件夹中你可以找到以下图片:
- logo(images/logo.png或images/logogroot .png)
- 顶部的两个漩涡包括logo(images/boven.png)
- 底部的两个漩涡(images/onder.png)
- 完整的'背景'(images/achtergrond.png)

目前的HTML:

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

    <div class="box side left"><!-- Open .box -->
        <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->


    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="leftUp"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="leftDown"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box"><!-- Open .box -->
        <a class="boxInner innerMiddle"><!-- Open .boxInner -->
        <div class="overlay white"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="rightUp"><!-- Open .box -->
        <a href="#" class="boxInner innerRightUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
      <div class="rightDown"><!-- Open .box -->
        <a href="#" class="boxInner innerRightDown"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box -->
    </div> <!-- Close .boxWrap -->

    <div class="box side right"><!-- Open .box -->
        <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->

</div></div></div><!-- Close .wrap -->

目前的CSS:

body {
    margin: 0;
    padding: 0;
    background-color:#1b1b1b;
}

.outer{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle{
    display: table-cell;
    vertical-align: middle;
}
.wrap {
    margin-left: auto;
    margin-right: auto; 
    height:100%;
    overflow: hidden;

    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;    
}

.box {
    float: left;
    position: relative;
    width: 24.45%;
    padding-bottom: 24.45%;

    margin:auto;

    top: 0; left: 0; bottom: 0; right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.side {
    width: 17.57%;
    padding-bottom: 17.57%;
}

.left{
    left:3%;
}

.right{
    left:-3%;
}

.boxWrap{
    float: left;
    position: relative;
    width: 11.49%;

    margin:auto;
    padding:0;

    top: 0; left: 0; bottom: 0; right: 0;
}

.leftUp, .leftDown, .rightUp, .rightDown{
    width: 100%;
    padding-bottom:100%;
    position:relative;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.leftUp, .leftDown{
    margin-left:7%;
}

.rightUp, .rightDown{
    margin-left:-7%;
}

.leftDown, .rightDown{
    margin-top:38%;
}

.boxInner {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    overflow: hidden;

    margin:0;
    padding:0;

    background-size:cover;
    background-repeat: no-repeat;
}

.innerLeft{
    background-image:url('../images/home_links.png');
}
.innerMiddle{
    background-image:url('../images/home_midden.png');
}
.innerRight{
    background-image:url('../images/home_rechts.png');
}

.innerLeftUp{
    background-image:url('../images/home_linksB.png');
}
.innerLeftDown{
    background-image:url('../images/home_linksO.png');
}
.innerRightUp{
    background-image:url('../images/home_rechtsB.png');
}
.innerRightDown{
    background-image:url('../images/home_rechtsO.png');
}

.overlay{
    height:100%;
    z-index:2;
    overflow:hidden;
    margin:0;
    padding:0;
}

.blue{
    background: rgba(0,101,147,0.40);
}

.blue:hover{
    background: rgba(185,185,185,0.40);
}

.hover:hover{
    background: rgba(245,245,245,0.40);
}

.blue:active, .hover:active{
    background: rgba(178,46,47,0.40);
}

Answer 1

我将装饰图像放置在中心 .box 元素内，并通过为其父级提供相反的旋转（即旋转：-45 度）来拉直它们。

这种方法的主要问题是元素围绕其中心旋转，并且中心的位置取决于元素的宽度。在响应式设计中，这意味着中心的位置取决于页面宽度，即它可以移动。

为了解决这个问题，我在图像周围放置了 2 个包装元素。外包装纸 (.straight) 的宽度为 1%。这使得它足够窄，宽度的轻微变化不会明显影响其内容的位置。然后将该外包装旋转-45°。

内部包装器 (.straight div) 的宽度为 10,000%。这使得内部包装器的宽度等于 .box 元素的宽度 (1% x 10000% = 100%)。然后可以将装饰图像放置在该图像包装中，并按正常方式调整大小、位置等。

我这样做了两次，一次是针对顶部图像，一次是针对底部图像。顶部图像的 css 在这里，底部图像的位置类似：

.straight{
  color:white;
  position:absolute;
  width:1%;
  height:1%;
  -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align:center;
}
.straight.top div{
  width:10000%;
  left:-5000%;
  top:-2000%;
  position:relative;
}

http://jsfiddle.net/John_C/8kFkR/