CSS：如何在 css 缩放转换期间管理溢出？

Question

我遇到了规模转换溢出的问题。

这是代码笔： https ://codepen.io/rukawaz/pen/XWdByLP

当我将鼠标悬停在左侧 div 上时，一切正常，过渡工作顺利且没有溢出。

 .header { height: 90vh; margin: 0; background-color: #fff; position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0%, 100% 85%, 0 100%); } .header__section { height: 100%; width: 50%; top: 0; border: 1px solid trasparent; position: absolute; overflow: hidden; background-size: cover; background-position: center center; transition: all .5s ease-in-out; } .header__section::before { content: ""; height: 100%; width: 100%; top: 0; left: 0; position: absolute; background-color: #034ea2; opacity: 0.8; transition: opacity .5s ease-in-out; } .header__section:hover { transform: scale(1.4); } .header__section:hover::before { opacity: 0; } .header__left { left: 0; background-image: url(https://cdn.pixabay.com/photo/2018/07/26/07/45/valais-3562988_960_720.jpg); } .header__right { left: 50%; background-image: url(https://cdn.pixabay.com/photo/2020/06/26/17/16/daisies-5343423_960_720.jpg); }

 <header class="header"> <div class="header__section header__left"> a </div> <div class="header__section header__right"> b </div> </header>

但是，当我将鼠标悬停在右侧 div 上时，背景图像出现溢出问题。

Answer 1

调整 z-index 来解决这个问题。 减少悬停元素的 if 以确保它位于另一个元素下方。

 .header { height: 90vh; margin: 0; background-color: #fff; position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0%, 100% 85%, 0 100%); } .header__section { height: 100%; width: 50%; top: 0; border: 1px solid trasparent; position: absolute; overflow: hidden; background-size: cover; background-position: center center; z-index: 1; /* added */ transition: all .5s ease-in-out, z-index 0s 0.5s; /* added */ } .header__section::before { content: ""; height: 100%; width: 100%; top: 0; left: 0; position: absolute; background-color: #034ea2; opacity: 0.8; transition: opacity .5s ease-in-out; } .header__section:hover { transform: scale(1.4); z-index: -1; /* added */ transition: all .5s ease-in-out, z-index 0s; /* added */ } .header__section:hover::before { opacity: 0; } .header__left { left: 0; background-image: url(https://cdn.pixabay.com/photo/2018/07/26/07/45/valais-3562988_960_720.jpg); } .header__right { left: 50%; background-image: url(https://cdn.pixabay.com/photo/2020/06/26/17/16/daisies-5343423_960_720.jpg); }

 <header class="header"> <div class="header__section header__left"> a </div> <div class="header__section header__right"> b </div> </header>

或者将比例应用于伪元素：

 .header { height: 90vh; margin: 0; background-color: #fff; position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0%, 100% 85%, 0 100%); } .header__section { height: 100%; width: 50%; top: 0; border: 1px solid trasparent; position: absolute; overflow: hidden; } .header__section::before, .header__section::after { content: ""; height: 100%; width: 100%; top: 0; left: 0; position: absolute; background-size: cover; background-position: center center; transition: all .5s ease-in-out; } .header__section::after { background-color: #034ea2; opacity: 0.8; } .header__section:hover::before { transform: scale(1.4); } .header__section:hover::after { opacity: 0; } .header__left { left: 0; } .header__left:before { background-image: url(https://cdn.pixabay.com/photo/2018/07/26/07/45/valais-3562988_960_720.jpg); } .header__right { left: 50%; } .header__right:before { background-image: url(https://cdn.pixabay.com/photo/2020/06/26/17/16/daisies-5343423_960_720.jpg); }

 <header class="header"> <div class="header__section header__left"> a </div> <div class="header__section header__right"> b </div> </header>