如何解决如何修复更改页面 z-index 堆叠顺序的剪辑路径?
https://jsfiddle.net/9gqbne6j/1/
<div class="row">
<div class="row-inner">
<div class="row-background"><div class="row-background-inner">
</div></div>
<div class="row-content">
<section class="first-section">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Circle-icons-flame.svg/1024px-Circle-icons-flame.svg.png" class="icon">
<h2 class="section-heading">
Some heading
</h2>
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec ullamcorper justo a neque mollis iaculis.
</p>
<button class="read-more">Read More</button>
</section>
</div>
</div>
</div>
html,body {
background-color: grey;
color: white;
position: relative;
}
*,*::before,*::after {
Box-sizing: border-Box;
}
body::after {
content: "";
position: absolute;
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAuNSA2MDQwLjEiPjxkZWZzPjxzdhlsZT4uY2xzLTF7ZmlsbDojMjMxZjIwO29wYWNpdHk6MC43O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMzIwLjUgMjQ0OC45MiAwIDYwNDAuMSAwIDYwNDAuMSAwIDAgMzIwLjUgMjQ0OC45MiIvPjwvc3ZnPg==);
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: 29.66%;
background-position: right 3% top 40%;
}
.row-inner {
position: relative;
clip-path: polygon(-38% 50%,128% 110%,128% -10%)
}
.row-background-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://i0.wp.com/www.wagpets.com/wp-content/uploads/2020/04/pembroke-welsh-corgi-appearance-and-vital-stats.jpeg?resize=1429%2C956&ssl=1);
background-size: cover;
background-repeat: no-repeat;
}
.row-content {
position: relative;
display: flex;
justify-content: flex-end;
}
.first-section {
padding: 2em 1em;
display: flex;
flex-flow: column;
align-items: center;
max-width: 33%;
z-index: 9;
}
.section-heading {
margin-bottom: 0.5em;
}
.icon {
width: 50px;
height: 50px;
}
.read-more {
padding: 0.5em 1em;
background-color: steelblue;
color: white;
border: 0;
}
以上是我正在尝试解决的问题的一个最小示例。它来自一个更大的页面,所以我希望可以通过 CSS 修复而不是完全重新组织 DOM。
因此,.row-inner 元素上有一个剪辑路径。如果启用了剪辑路径,则 .first-section 文本将出现在 body::after 背景下方,但如果禁用剪辑路径,则文本将出现在 body::after 背景上方。
有没有办法让 .first-section 出现在 body::after 背景之上,并且仍然启用剪辑路径?
我从之前的问题中读到它与剪辑路径改变元素的渲染顺序有关,但在这种情况下我找不到解决方案,我还没有尝试过。
如果单独通过 CSS 无法修复,那么重新排序 DOM 以修复它的最小方法是什么?
谢谢
解决方法
规则clip-path
需要分配给更多子元素。
通过从 .row-background-inner
中删除 .row-inner
来指定此规则。
html,body {
background-color: grey;
color: white;
position: relative;
}
*,*::before,*::after {
box-sizing: border-box;
}
body::after {
content: "";
position: absolute;
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAuNSA2MDQwLjEiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMjMxZjIwO29wYWNpdHk6MC43O308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMzIwLjUgMjQ0OC45MiAwIDYwNDAuMSAwIDYwNDAuMSAwIDAgMzIwLjUgMjQ0OC45MiIvPjwvc3ZnPg==);
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: 29.66%;
background-position: right 3% top 40%;
}
.row-inner {
position: relative;
/*clip-path: polygon(-38% 50%,128% 110%,128% -10%);*/
}
.row-background-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://i0.wp.com/www.wagpets.com/wp-content/uploads/2020/04/pembroke-welsh-corgi-appearance-and-vital-stats.jpeg?resize=1429%2C956&ssl=1);
background-size: cover;
background-repeat: no-repeat;
clip-path: polygon(-38% 50%,128% -10%);
}
.row-content {
position: relative;
display: flex;
justify-content: flex-end;
}
.first-section {
padding: 2em 1em;
display: flex;
flex-flow: column;
align-items: center;
max-width: 33%;
z-index: 9;
}
.section-heading {
margin-bottom: 0.5em;
}
.icon {
width: 50px;
height: 50px;
}
.read-more {
padding: 0.5em 1em;
background-color: steelblue;
color: white;
border: 0;
}
<div class="row">
<div class="row-inner">
<div class="row-background"><div class="row-background-inner"></div></div>
<div class="row-content">
<section class="first-section">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Circle-icons-flame.svg/1024px-Circle-icons-flame.svg.png" class="icon" />
<h2 class="section-heading">
Some Heading
</h2>
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec ullamcorper justo a neque mollis iaculis.
</p>
<button class="read-more">Read More</button>
</section>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。