如果块的样式为“skew”，如何更改旋转背景图像答案

【问题标题】：How to change rotate background-image, if block is styled by "skew"如果块的样式为“skew”，如何更改旋转背景图像
【发布时间】：2018-04-15 09:01:33
【问题描述】：

我有一些问题，我认为这个问题还没有解决。 [样式和代码底部]

.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);
}`

【问题讨论】：

标签： css background-image css-transforms skew

【解决方案1】：

一个常见的解决方案是使用 pseudo-element 作为背景图像并在其上创建反向 skew ：

.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>

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

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

您还需要小心任何溢出问题。

【讨论】：