在图片上添加叠加层

Question

我想转换一个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属性是什么？

Answer 1

您可以将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;

Answer 2

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

.background {
  position: relative;
  width: 960px;
  height: 720px;
  background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}

.overlay {
  position: absolute;
  font-size: 28px;
  top: 200px;
  left: 149px;
  width: 665px;
  height: 395px;
  -webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
  background: linear-gradient(359.2deg, transparent 6%, red 6%)
}

<div class="background">
  <div class="overlay"></div>
</div>