javascript - 如何在视频上放置倾斜叠加

Question

我正在尝试在背景中以全宽播放的视频上创建倾斜叠加。

目前，倾斜叠加效果很好，但是如果我想要它在右下角而不是左上角怎么办？我需要更改倾斜度吗？

这是我的代码：

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url('//demosthenes.info/assets/images/container.jpg') no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

h1 {
  font-size: 2.5rem;
  padding: 5% 0 0 12%;
  letter-spacing: .1rem;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.skew-overlay {
  z-index: 99;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -400px;
  width: 600px;
  background: #fff;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 700px;
  padding: 0 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.text {
  font-size: 1rem;
  font-weight: 400;
}

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container">
  <div class="overlay">
    <div class="skew-overlay"></div>
    <div class="content">
      <span class="text">Wise busy past both park when an ye no. Nay likely her length sooner thrown sex lively income. The expense windows adapted sir. Wrong widen drawn ample eat off doors money. Offending belonging promotion provision an be oh consulted ourselves it. Blessing welcomed ladyship she met humoured sir breeding her. Six curiosity day assurance bed necessary. </br>Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially reasonable off one. Wonder bed elinor family secure met. It want gave west into high no in. Depend repair met before man admire see and. An he observe be it covered delight hastily message. Margaret no ladyship endeavor ye to settling. </span>
    </div>
  </div>
</div>

这是工作小提琴-小提琴

标签： javascriptjqueryhtmlcss

Answer 1

根据您对问题的评论：

我希望叠加层与左上角的完全一样，但在右下角

在这种情况下，只需left将 CSS 中的属性.skew-overlayfrom-400px更改为400px：

.skew-overlay {
  left: 400px;
  /* other rules here... */
}

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url('//demosthenes.info/assets/images/container.jpg') no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

h1 {
  font-size: 2.5rem;
  padding: 5% 0 0 12%;
  letter-spacing: .1rem;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.skew-overlay {
  z-index: 99;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 400px;
  width: 600px;
  background: #fff;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 700px;
  padding: 0 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.text {
  font-size: 1rem;
  font-weight: 400;
}

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container">
  <div class="overlay">
    <div class="skew-overlay"></div>
    <div class="content">
      <span class="text">Wise busy past both park when an ye no. Nay likely her length sooner thrown sex lively income. The expense windows adapted sir. Wrong widen drawn ample eat off doors money. Offending belonging promotion provision an be oh consulted ourselves it. Blessing welcomed ladyship she met humoured sir breeding her. Six curiosity day assurance bed necessary. </br>Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially reasonable off one. Wonder bed elinor family secure met. It want gave west into high no in. Depend repair met before man admire see and. An he observe be it covered delight hastily message. Margaret no ladyship endeavor ye to settling. </span>
    </div>
  </div>
</div>