Question

我试图创建一个带有图片背景的倾斜部分。关键是我希望这个背景与父母的偏斜被取消。我试图用伪元素实现这一点。

我不明白为什么溢出：隐藏父级不会影响:: 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

提前致谢

克里斯。

Answer 1

尝试这个

<强>演示

＆＃13;

* {
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;
 }

＆＃13;

<section class="main">

</section>

＆＃13;

Answer 2

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

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

:tag /blabla\\|user

欢呼：）

伪元素不受父溢出的影响

2 个答案: