个人中心
gpt4 book ai didi

html - 添加剪辑路径后子元素消失

转载 作者：行者123 更新时间：2023-11-28 14:15:19 26 4
gpt4 key购买 nike

对于我正在进行的设计元素，我想在我的次要内容上放置一个剪辑路径。但是，在放置剪辑路径代码后，一些子元素或元素在我的 .about 内容中消失了。我试过使用 position:absolute 或 z-index 但我的 .about 内容没有任何反应。提前致谢。 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

.body {
    height: 100vh;
    background: linear-gradient( #001f3f, transparent 80% ),
                    linear-gradient(0deg, #fff, transparent) 
                    ,url(img/bgmain.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
}

.firstlayout {
    height: 100vh;
}

.overlay{
	background-color: rgba(0,0,0,.95);
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transition: opacity 650ms;
	transform: scale(0);
	opacity: 0;
    display: none;
}

/* Hamburger Menu */

.menu-toggle {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    color: #eeeeee;
    font-size: 3rem;
    cursor: pointer;
    z-index: 1000;
    display: none;
}

/* End of Hamburger Menu */

/* Navagation Link */
header {
    font-family: "Raleway", sans-serif;
    position: relative;
    width: 100%;
    height: 10rem;
    z-index: 2;
}

nav {
    /* padding-top: 5rem; */
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.4rem;
}

nav img {
    height: 7rem;
    margin: 0 0 0 12rem;
}

nav ul {
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    font-weight: 900;
    font-size: 1.4rem;
    padding: 1rem 0;
    margin: 0 1rem;
    position: relative;
    color: #eee;
}

.menu {
    margin: 0 12rem 0 0;
}

.menu a {
    font-size: 1rem;
    margin: 0 .1rem;
    outline: none;
}

.menu a:last-child{
    margin-right: 0;
}

nav ul li a::before,
nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #f4511e;
    left: 0;
    transform: scaleX(0);
	transition: all .5s;
}

nav ul li a::before{
	top: 0;
	transform-origin: left;
}

nav ul li a::after{
	bottom: 0;
	transform-origin: right;
}

nav ul li a:hover::before,
nav ul li a:hover::after{
	transform: scaleX(1);
}

.btn {
        border: none;
        border-radius: 30px;
        background-color: #f4511e;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        padding: 9px;
        width: 70px;
        text-transform: uppercase;
}

.btninfo{
    padding: 9px 19px;
}
/* End of Navagation Menu */

/* Content of the Website *****************/

.content {
    height: 100vh;
    text-align: center;
}

.possible {
    color: #fff;
    letter-spacing: 10px;
    text-transform: uppercase;
    padding-top: 8rem;
    font-family: "Coiny", sans-serif;
    font-size: 3.6rem;
}
.possible2 {
    color: #fff;
    padding-top: 4rem;
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
}

.arrow {
    width: 50px;
    padding-top: 10rem;
}

/* About 2nd layer ******************/

.about {
    position: absolute;
    height: 100vh;
    background-color: firebrick;
    clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
    width: 100%;
    z-index: -1000;
}

.jury {
    position: relative;
    font-family: "Coiny", sans-serif;
    text-align: center;
    font-size: 4rem;
    padding-top: 2em;
}

.jury span {
    color: #f4511e;
}

.rectangle {
    border: 1px solid firebrick;
    fill: firebrick;
}
<body>
    <div class="body">
        <div class="firstlayout">
        <header>
            <div class="menu-toggle" id="hamburger">
                    <i class="fas fa-bars"></i>
            </div>
            <div class="overlay"></div>
            <nav>
                <img src="img/logo2.png" alt="Logo" class="logo">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <div class="menu">
                    <a href="#" class="btn">Contact</a>
                    <a href="#" class="btn btninfo">Info</a>
                </div>
            </nav>
        </header>
        <div class="content">
                <h1 class="possible">Everything is Possible</h1>
                <h2 class="possible2">"as long as you put your mind to it and put the work and time into it"</h2>
                <a href="#about"><img class="arrow" src="img/arrow.svg" alt="Down arrow"></a>
            </div>
        </div>
    </div>
    <div id="about" class="about">
        <h1 class="jury"><span>Hi!</span>, I'm Jury Gregorio</h1>
        <div class="rectangle"><br></div>
    </div>
    
</body>

最佳答案

这是 clip-path 的逻辑结果，因为它将剪切元素及其内容。

在这种情况下，您可以将 clip-path 替换为简单的背景:

.clip-path {
  clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
  background: red;
}
.background {
  background:
    linear-gradient(to bottom right,transparent 49.8%,red 50%) right       /59% 100%,
    linear-gradient(to bottom right,transparent 49.8%,red 50%) bottom right/153% 61%;
  background-repeat:no-repeat;
}

.box { 
  padding: 10px;
  margin:10px;
  font-size:25px;
  border:1px solid;
}
<div class="clip-path box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>
<div class="background box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>

关于html - 添加剪辑路径后子元素消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55989471/

26 4 0
文章推荐： css-grid 和 `fr` 单元不适用于 `overflow-wrap: break-word`
文章推荐： iphone - 在 iPhone 上用 CSS 按下样式链接？
文章推荐： css - React 生产在桌面和移动设备的 css 文件之间困惑
文章推荐： javascript - 如何删除谷歌地图的位置框(左上角)？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com