在纯CSS中旋转的图像后面的纯背景 [英] Solid background behind a rotated image in pure CSS
问题描述
有没有办法我可以使用纯CSS绘制图像后面的黑色背景？
我相信可以使用：before 伪类。但我不能使它的工作。我也尝试使用阴影，但最终的结果不是我想要实现的。
范围和要求： >
现代浏览器，没有javascript，没有jQuery，没有插件，没有额外的HTML标记。
我知道有很多方法来实现我想要做的，但我真的期待一个纯CSS解决方案。如前所述，试图避免额外的标记和javascript的东西，简单的那样。谢谢！
这是小提琴和下面的代码。
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-transformation-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 =300height =150src =http://upload.wikimedia.org/wikipedia/en/7/70/Example.png/>< / body>< / html> ;
添加了div（对不起： - ）
Is there a way i can draw the black "background" behind the image using pure CSS ?
I am persuaded that it can be done using the :before pseudo-class. But i can't make it work. I have also tried using shadows, but the final result is not similar what i am trying to achieve.
Scope and requirements:
Modern browsers, no javascript, no jQuery, no plugins and no extra HTML markup.
Before answering:
I know there are zillion ways to achieve what i am trying to do, however i am really looking forward for a pure CSS solution. As stated before, trying to avoid extra markup and javascript for something as simple as that. Thanks!
Here is a fiddle and the code below.
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>
It seems like the before: element is ignored on img tags - http://jsfiddle.net/GVdYe/
Added a div (sorry :-)
这篇关于在纯CSS中旋转的图像后面的纯背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
