代码之家 › 专栏 › 技术社区 › fightstarr20

CSS剪辑-矩形(自动)与插入(0)

css

fightstarr20 · 技术社区 · 6 年前

clip: rect(auto, auto, auto, auto)

我试着移动到剪辑路径,并有这个。。

-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);

这与clip的行为方式不同,在clip中使用auto看起来就像不应用任何剪辑一样。

在这个例子中,插入的剪辑路径是对向的吗?如何使它们相同?

我原来的行为是这样的。。

html,
body {
	height: 100%;
	margin: 0;
}


.section {
  height:100vh;
}

.blue {
background:blue;
}

.menu_holder,
.footer {
	position: absolute;
	width: 100%;
	height: 100%;
	clip: rect(auto, auto, auto, auto);
}

.header,
.footer {
	background-color: #F97D9F;
}

.menu {
	position: fixed;
	top: 48px;
	right: 48px;
}

<div class="container">
  
	<div class="menu black">
		<img style="width:48px;height:48px;" src="https://image.flaticon.com/icons/svg/149/149176.svg">
	</div>
			
    <div class="section blue">
		<div class="header">
			<div class="menu_holder">
				<div class="menu white">
					<img style="width:48px;height:48px;" src="https://image.flaticon.com/icons/svg/149/149719.svg">
				</div>
			</div>
			
		</div>
    </div>
 
    <div class="section">
		content
    </div>
	
	<div class="section">
		content
    </div>

    <div class="section">
		<div class="footer">
			content
			<div class="menu white">
				<img style="width:48px;height:48px;" src="https://image.flaticon.com/icons/svg/149/149719.svg">
			</div>
		</div>
    </div>

</div>

但是在中使用新的剪辑路径属性时,显示剪辑将无法工作