如何制作我的2面罩液？

Question

我有一个2侧盖，其图像侧为标题侧。 当屏幕调整大小时，我想让标题面移动到图像面！ 像这个网站封面NKWindows

感谢帮助

Answer 1

你可以使用这样的东西。将封面放置为容器的背景，然后将内容放在#title div中。这样，当屏幕变小时，背景将保持不变，右手内容似乎会在其上移动。

＆＃13;

＆＃13;

#cover {
  background-image: url(http://www.nkwindows.co.nz/assets/HomeSlides/nk-windows-02.jpg);
  background-repeat: no-repeat;
  width: 100%;
  overflow: auto;
  position: relative;
  height: 180px;
}
#title {
  float: right;
  font-size: 40px;
  padding: 10px;
  margin: 0;
  width: 250px;
  background-color: #E2231A;
  color: #fff;
  height: 180px;
  box-sizing: border-box;
}

＆＃13;

<div id="cover">
  <div id="title">This is the
    <br />moving title</div>
</div>

＆＃13;

＆＃13;

＆＃13;