有没有办法可以使用纯 CSS 绘制图像后面的黑色“背景”？
我确信可以使用:before伪类。但我无法让它发挥作用。我也尝试过使用阴影，但最终结果与我想要达到的效果并不相似。
范围及要求：
现代浏览器，没有 javascript，没有 jQuery，没有插件，也没有额外的 HTML 标记。
回答之前：
我知道有无数种方法可以实现我想要做的事情，但是我真的很期待一个纯 CSS 解决方案。如前所述，尝试避免额外的标记和 JavaScript 来完成如此简单的事情。谢谢！
这里有一个fiddle http://jsfiddle.net/cfBWb/1/和下面的代码。
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: ".";
}
<!doctype html>
<html>
<body>
<img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>
</html>
看起来像 before: 元素在 img 标签上被忽略 -http://jsfiddle.net/GVdYe/ http://jsfiddle.net/GVdYe/
添加了一个 div （抱歉:-)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
