html - 用 CSS 制作的形状不断溢出父容器
问题描述
我正在制作一个小页面,我需要在背景中有 2 个形状(附设计截图)。我完全用 CSS 制作了它们。我已经为父容器尝试了 ::before/::after ,并且只是在 HTML 中单独的 DIV-s。问题是在这两种情况下,右下角的形状总是不断地离开容器并且出现滚动。我认为溢出会有所帮助,但它并没有为我做。谁能帮我解决这个问题?谢谢!
body {
position: relative;
min-height: 100vh;
width: 100%;
padding: 10%;
}
.container {
width: 100%;
margin: 1.5rem 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
}
.background-one {
position: absolute;
top: 0;
left: -50%;
background: linear-gradient(to top, $violet, $magenta);
width: 375px;
height: 54%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: -1;
}
.background-two {
position: absolute;
bottom: 0;
right: -50%;
background: hsl(236, 72%, 63%);
width: 375px;
height: 54%;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
z-index: -1;
}
<body>
<div class="background-one"></div>
<div class="background-two"></div>
<div class="container">
<div class="phone"></div>
</div>
</body>
解决方案
好的,最后我想我找到了解决方案,以防万一有人遇到同样的问题。我已将这些 DIV(它们是背景形状)嵌套到另一个 DIV 中。我已经使容器 DIV 覆盖全屏,然后将这些形状 DIV 绝对定位到新容器,将容器的溢出设置为隐藏。
.newContainer {
position: absolute; //Its container is set to relative.
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.backgroundShape {
position: absolute;
bottom: 0;
right: -50%;
//other properties with width, height etc.
}
推荐阅读
- ruby-on-rails - Watir:元素存在但.exists?返回假
- git - 删除分支后测试 Git 存储库大小减少
- php - php 函数参数的数据类型的行为
- c# - 相似配置文件推荐的机器学习算法(ML.NET 库).NET C#
- c# - 使用 C# 代码统一导入 .step 文件?
- c - libusb 设备描述符:bcdUSB 可能值
- robotframework - 如何使用 Robot Framework 编写代码来操作重复登录和注销多个凭据
- python - 我刮掉了标题和价格以及链接和信息表,我将其命名为planet_data,当我编写csv文件时,我得到了重复的planet_data
- sas - 如何从我的表 SAS 4GL - RETAIN 创建变量列?
- java - 对于本机查询,Oracle 函数调用有时会失败