css - 如果 block 的样式为 "skew"，如何更改旋转背景图像

Question

我有一些问题，我认为这个问题不会得到解决。 [样式和代码底部]

.box-blog {
  background: url(../img/image.png) center no-repeat;
  background-size: cver;
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-top: 71px;
  height: 192px;
  border-radius: 0 40px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background-color: #333;
  box-shadow: 15px 0 0 rgba(248,48,46,.3);
}`

Answer 1

一个常见的解决方案是对背景图像使用伪元素，并在其上创建反向倾斜:

.box-blog {
  position: relative;
  width: 80%;
  display: block;
  margin: 0 auto;
  margin-top: 71px;
  height: 192px;
  border-radius: 0 40px;
  transform: skew(20deg);
  background-color: #333;
  box-shadow: 15px 0 0 rgba(248, 48, 46, .3);
  overflow: hidden;
}

.box-blog:before {
  content: " ";
  background: url(https://lorempixel.com/400/400/) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  left: -40px;
  transform: skew(-20deg);
}

<div class="box-blog">

</div>

这可以是任何类型转换的通用解决方案，您有两种情况:

• 在不变换背景的情况下变换元素:变换元素并像我们一样在伪元素上创建逆变换
• 在不变换元素的情况下变换背景:您只需将变换添加到伪元素即可。

您还需要注意任何溢出问题。