css - CSS:如何在 CSS 缩放转换期间管理溢出?
问题描述
我遇到了规模转换溢出的问题。
这是代码笔: 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 上时,背景图像出现溢出问题。
解决方案
调整 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>
推荐阅读
- list - Netlogo:从字符串读取需要文字值
- python - numpy.dtype 与 numpy.ndarray.dtype
- flutter - 是否可以在颤振中创建一个打开电子邮件应用程序的按钮,其中电子邮件帐户“TO”已经写好?
- c - 使用 (void **) 传递 (double ***) 指针可以吗?
- android - Android画布绘制顺序
- jmeter - 如何使用 JMeter 测试 100 个并行 15GB 文件下载的性能?
- gradle - Quarkus Gradle 插件:覆盖来自依赖库的重复文件条目
- python - 如何更新将在 celery worker 任务中传播的烧瓶 app.config?
- sql-server - 无法创建从 Microsoft SQL 到 Snowflake 的链接服务器
- jquery - 如何在ajax调用后重新加载一个div,其中是一个表单