不受父溢出影响的伪元素答案

【问题标题】：Pseudo element not affected by parent overflow不受父溢出影响的伪元素
【发布时间】：2015-12-08 10:39:09
【问题描述】：

我正在尝试创建一个带有图片背景的倾斜部分。关键是我希望取消父级倾斜的背景。我试图用一个伪元素来实现这一点。

我不明白为什么父级的 overflow:hidden 不会影响 ::after 元素。有人可以帮忙吗？

.main::after {
  content:"";
  background: url("https://images.unsplash.com/photo-1420310414923-bf3651a89816?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=47f355d1a7520ad5f1718e9388dd4967");
  background-size:cover;
  position:absolute;
  display:block;
  width: 110%;
  height:110%;
  transform: rotateZ(5deg) skew(5deg);

这里是代码和示例：http://codepen.io/anon/pen/jWEZxK

提前致谢

克里斯。

【问题讨论】：

这是您想要实现的目标吗？ codepen.io/mkdizajn/pen/GogQev?editors=110
是的，就是这样。抱歉，我没有收到您的消息的任何通知。
您希望我将其发布为答案，以便您将其标记为解决方案吗？

标签： html css overflow pseudo-element

【解决方案1】：

试试这个

演示

* {
margin:0;
padding:0;
/*height:100%;*/
}

body {
  background: #272727;
}

section {
  width:100%;
  min-height:500px;
  transform: rotateZ(-5deg) skew(-5deg);
}
.main {
  background-color: crimson;
  overflow:hidden;
  position:relative;
  z-index:1;
 }

.main::after {
  content:"";
  background: url("https://images.unsplash.com/photo-1420310414923-bf3651a89816?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=47f355d1a7520ad5f1718e9388dd4967");
  background-size:cover;
  position:absolute;
  display:block;
left:-10%;
  right:-10%;
  top:-10%;
  bottom:-10%;
  transform: rotateZ(5deg) skew(5deg);
  z-index:2;
 }

<section class="main">

</section>

【讨论】：

谢谢。所以我想这是一个 Z-index 问题。我必须明白这一点。

【解决方案2】：

after pseude 需要与父元素相同的定义.. 我们只是重复声明..

http://codepen.io/mkdizajn/pen/GogQev?editors=110

overflow:hidden;
transform: rotateZ(0deg) skew(0deg); }

干杯:)

【讨论】：