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>

这是工作中的提琴手-Fiddle

Answer 1

从您对问题的评论：

我想要的覆盖层与左上角完全相同，但右下角

在这种情况下，只需将left的CSS中的.skew-overlay属性从-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>

Answer 2

我决定对您的小提琴进行此更改：

geography

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

2 个答案: