html5页面只能做成纯色背景吗,html – 纯CSS中旋转图像背后的纯色背景

有没有办法可以使用纯CSS在图像后面绘制黑色“背景”？

我被说服可以使用：before伪类来完成它.但我不能让它发挥作用.我也试过使用阴影,但最终的结果与我想要达到的效果并不相似.

范围和要求：

现代浏览器,没有javascript,没有jQuery,没有插件,没有额外的HTML标记.

在回答之前：

我知道有很多方法可以实现我想要做的事情,但我真的很期待一个纯CSS解决方案.如前所述,尽量避免使用额外的标记和javascript.谢谢！

这是一个fiddle和下面的代码.

img {

position: absolute;

top: 100px;

left: 100px;

-webkit-transform-origin: center left;

-moz-transform-origin: center left;

-ms-transform-origin: center left;

-o-transform-origin: center left;

transform-origin: center left;

-webkit-transform: rotate(-2deg);

-moz-transform: rotate(-2deg);

-ms-transform: rotate(-2deg);

-o-transform: rotate(-2deg);

transform: rotate(-2deg);

}

img:before {

background: #000;

-webkit-transform-origin: center left;

-moz-transform-origin: center left;

-ms-transform-origin: center left;

-o-transform-origin: center left;

transform-origin: center left;

-webkit-transform: rotate(-4deg);

-moz-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

-o-transform: rotate(-4deg);

transform: rotate(-4deg);

width: 300px;

height: 300px;

content: ".";

}