Question

我的问题很简单。我需要背景图像中的对角线与徽标中的“X”对齐，无论视口有多宽，都要保持在那里。我试图用css实现它，但没有结果。我想要一些javascript但我不知道从哪里开始。

<body>
  <header>
    <div class="container">
      <svg class="logo"></svg>
    </div>
  </header>
</body>

* {
  box-sizing: border-box
}

body {
  background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

header { 
  opacity: 1;
  height: 135px;
  line-height:135px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  transition: all 0.3s;
  z-index: 1000;
  text-align: center;
}

.container {
  width: 100%;
  max-width: 1200px;
  line-height: 135px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  padding: 0 80px;  
}

.logo {
  max-width: 200px;
  float: left;
}

http://codepen.io/easynowbaby/pen/qdLbgP

谢谢！

Answer 1

看起来你想要的是玩背景位置，试试这样的事情，

background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;

将背景图像水平固定到标题中的徽标

1 个答案: