html-使用css-transforms为所有浏览器创建遮罩,遇到定位问题

概述我需要创建一个遮罩,以在基于vh的所有浏览器中覆盖图像(无剪切路径)我使用带有旋转变换的div作为蒙版,然后在内部反转旋转.我遇到的问题是内部内容的位置不正确.图像需要与内部容器的左上方对齐.我努力了：>使用顶部和左侧的值进行定位无效.>使用transform移动内部容器有效,但是我找不到所需的值是如何计算的.https://jsfiddle.n

我需要创建一个遮罩,以在基于vh的所有浏览器中覆盖图像(无剪切路径)

我使用带有旋转变换的div作为蒙版,然后在内部反转旋转.

我遇到的问题是内部内容的位置不正确.图像需要与内部容器的左上方对齐.

我努力了：

>使用顶部和左侧的值进行定位无效.
>使用transform移动内部容器有效,但是我找不到所需的值是如何计算的.

https://jsfiddle.net/owfgLnv7/5/

.container {  wIDth: 70vh;  height: 100vh;  background-color: blue;  position: absolute;  left: 0;  top: 0;  z-index: 0;}.tri {  position: absolute;  wIDth: 70vh;  height: 70vh;  transform: rotate(45deg);  top: calc((100vh - 70vh) / 2);  transform-origin: center center;  background-color: transparent;  z-index: 2;  overflow: hIDden;}.reset-tri {  position: relative;  z-index: 1;  transform: rotate(-45deg);  transform-origin: center center;}.inner-container {  background: black;}

需要获取图像,使其左上对齐并正常流动最佳答案基本上,将元素转换(在此处旋转)后,会将它们从流程中删除-因此,尺寸标注将不会像您不选择时那样表现.

一种方法就是使用简单的数学：

>如果您旋转a侧的45度正方形(此处为70vh正方形),则对角线将为√2* a〜1.414 * a,
>因为transform-origin在此处居中,这意味着溢出宽度或高度等于(1.414 * a-a)/ 2或(1.414-1)* a / 2.
>可以为容器的宽度声明类似的参数,该宽度等于宽度：calc(1.414 * 70vh)

请参见下面的演示：

body {  margin: 0;}.page {  wIDth: 100vw;  height: 100vh;  background: grey;}.container {  wIDth: calc(1.414 * 70vh); /* changed */  height: 100vh;  background-color: blue;  position: absolute;  left: 0;  top: 0;  z-index: 0;}.tri {  position: absolute;  wIDth: 70vh;  height: 70vh;  transform: rotate(45deg);  top: calc(0.414 * 70vh / 2); /* changed */  left: calc(0.414 * 70vh / 2); /* added */  transform-origin: center center;  background-color: transparent;  z-index: 2;  overflow: hIDden;}.reset-tri {  position: relative;  z-index: 1;  transform: rotate(-45deg);  transform-origin: center center;}.inner-container {  background: black;}

<div >  <div >    <div >      <div >        <div >          <img src="https://openclipart.org/download/230732/360sj3.svg" />        </div>      </div>    </div>  </div></div>

使用背景图片

对于近乎完美的遮罩,您可以：

>将图像移动到reset-tri容器中的背景图像,然后
>添加一个scale(1.414)转换以完全填充原始未转换的tri容器.

请参见下面的演示：

body {  margin: 0;}.page {  wIDth: 100vw;  height: 100vh;  background: grey;}.container {  wIDth: calc(1.414 * 70vh); /* changed */  height: 100vh;  background-color: blue;  position: absolute;  left: 0;  top: 0;  z-index: 0;}.tri {  position: absolute;  wIDth: 70vh;  height: 70vh;  transform: rotate(45deg);  top: calc(0.414 * 70vh / 2); /* changed */  left: calc(0.414 * 70vh / 2); /* added */  transform-origin: center center;  background-color: transparent;  z-index: 2;  overflow: hIDden;}.reset-tri {  position: relative;  z-index: 1;  transform: rotate(-45deg) scale(1.414); /* scale by √2 */  transform-origin: center center;  wIDth: 70vh;  height: 70vh;  /* use a bacground image */  background-size: cover;  background-image: url("https://openclipart.org/download/230732/360sj3.svg");}

<div >  <div >    <div >      <div ></div>    </div>  </div></div>

使用图像元素

要在不使用背景图像的情况下实现近乎完美的蒙版,可以返回到之前的标记并添加object-fit：cover来填充包含其包装器内部容器尺寸的img元素-请参见下面的演示：

body {  margin: 0;}.page {  wIDth: 100vw;  height: 100vh;  background: grey;}.container {  wIDth: calc(1.414 * 70vh); /* changed */  height: 100vh;  background-color: blue;  position: absolute;  left: 0;  top: 0;  z-index: 0;}.tri {  position: absolute;  wIDth: 70vh;  height: 70vh;  transform: rotate(45deg);  top: calc(0.414 * 70vh / 2); /* changed */  left: calc(0.414 * 70vh / 2); /* added */  transform-origin: center center;  background-color: transparent;  z-index: 2;  overflow: hIDden;}.reset-tri {  position: relative;  z-index: 1;  transform: rotate(-45deg) scale(1.414); /* scale by √2 */  transform-origin: center center;  wIDth: 70vh;  height: 70vh;}.inner-container {  height: 100%; /* fill the parent wrapper */}.inner-container > img {  wIDth: 100%;  height: 100%;  object-fit: cover; /* the image fills the parent container */}

<div >  <div >    <div >      <div >        <div >          <img src="https://openclipart.org/download/230732/360sj3.svg" />        </div>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html-使用css-transforms为所有浏览器创建遮罩,遇到定位问题 全部内容，希望文章能够帮你解决html-使用css-transforms为所有浏览器创建遮罩,遇到定位问题 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。