Question

我试图获得此设计： website design

但是我对徽标和漩涡有疑问，我不知道如何添加它们。我尝试过绝对定位，但在调整网站大小时，徽标和漩涡最终会出现在与图像方块不同的位置。

如何添加漩涡和徽标？

JSFiddle： http://jsfiddle.net/uHsJv/1/
当您想要编辑JS小提琴时，在我网站上的images文件夹中，您可以找到以下图像：
- 徽标（images / logo.png或images / logogroot.png）
- 顶部的两个漩涡包括logo（images / boven.png）
- 底部的两个漩涡（images / onder.png）
- 完整的背景＆＃39; （图像/ 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元素中，并通过向它们的父级提供相反的旋转来拉直它们，即旋转：-45deg。

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

为了解决这个问题，我在图像周围放置了两个包装元素。外包装（.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/

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

1 个答案: