如何修复剪辑路径改变页面的 z-index 堆叠顺序?
How to fix clip-path altering the z-index stacking order of page?
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 背景之上,同时剪辑路径仍然启用?
我从之前的问题中读到它与 clip-path 改变元素的渲染顺序有关,但我找不到解决这个问题的方法,我还没有尝试过已经.
如果无法单独通过 CSS 修复,重新订购 DOM 修复它的最简单方法是什么?
谢谢
需要将规则 clip-path
分配给 更多子 元素。
通过从 .row-inner
中删除它来为 .row-background-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% 110%, 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>
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 背景之上,同时剪辑路径仍然启用?
我从之前的问题中读到它与 clip-path 改变元素的渲染顺序有关,但我找不到解决这个问题的方法,我还没有尝试过已经.
如果无法单独通过 CSS 修复,重新订购 DOM 修复它的最简单方法是什么?
谢谢
需要将规则 clip-path
分配给 更多子 元素。
通过从 .row-inner
中删除它来为 .row-background-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% 110%, 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>