Css 在图片上添加覆盖

我想将div转换为在面板前面应用它

position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;

但在右下角，div并没有填充到背景中

---

什么是css属性来正确设置它？

您可以将skewX添加到css中。 我试了一下，几乎填满了这个形状：

    position: absolute;
    font-size: 28px;
    top: 203px;
    left: 149px;
    width: 641px;
    height: 354px;
    -webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
    background-color: red;

---

此代码修复了右下角，并考虑了其他答案：

.background{
位置：相对位置；
宽度：960px；
高度：720px；
背景图像：url（'http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}
.覆盖{
位置：绝对位置；
字号：28px；
顶部：200px；
左：149px；
宽度：665px；
身高：395px；
-webkit变换：倾斜（3deg）倾斜（1deg）旋转（0.9度）；
背景：线性梯度（359.2度，透明6%，红色6%）
}

为什么不制作一个PNG图像并使该部分透明？然后你可以把这个div放在图像后面。另外，你能告诉我们这背后的实际HTML吗？在红色部分，我将添加自定义文本。他的解决方案比你们的解决方案更能填充形状。也许吧，但我们应该改变这两个参数（skewX和skewY）以找到正确的参数，我在Firefox inspector中试用了它。对我来说很好：）