Html 纯CSS中旋转图像后的固体背景

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

我相信可以使用

：before

伪类来完成。但我不能让它工作。我也尝试过使用阴影，但最终的结果与我试图实现的不一样

范围和要求：

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

在回答之前：

我知道有无数种方法可以实现我想做的事情，但是我真的很期待一个纯CSS解决方案。如前所述，对于这样简单的东西，尽量避免额外的标记和javascript。谢谢

下面是一个示例和代码

img{
位置：绝对位置；
顶部：100px；
左：100px；
-webkit变换原点：左中；
-moz变换原点：左中；
-ms变换原点：左中；
-o变换原点：左中；
变换原点：左中；
-webkit变换：旋转（-2deg）；
-moz变换：旋转（-2deg）；
-ms变换：旋转（-2deg）；
-o变换：旋转（-2deg）；
变换：旋转（-2deg）；
}
img：以前{
背景：#000；
-webkit变换原点：左中；
-moz变换原点：左中；
-ms变换原点：左中；
-o变换原点：左中；
变换原点：左中；
-webkit变换：旋转（-4deg）；
-moz变换：旋转（-4deg）；
-ms变换：旋转（-4deg）；
-o变换：旋转（-4deg）；
变换：旋转（-4deg）；
宽度：300px；
高度：300px；
内容：“.”；
}

html（或正文）{
背景：url（）；
}

---

我不知道你是想把它放在图像后面还是整个浏览器后面。如果您只希望它位于图像后面，则需要一个包装器或至少另一个

，

或

似乎与前面一样：img标记上的元素被忽略-

---

添加了一个div（抱歉：-）

您遇到的问题与伪元素的工作方式有关

元素在其父元素内部渲染之前和之后。因此：

 div:before{ content:'before'; } 
 div:after{ content:'after'; } 

渲染基本上是这样的：

打招呼之前和之后

您不能将其他元素放在

img

中，因为

img

是一个替换的元素，因此不能对其应用伪元素

因此，最简单的选择是将图像包装在

中（有时图像也是如此），并将您的before样式应用于

a

或者，接受阴影盒提供的非旋转阴影

---

不幸的是，CSS有其局限性，因此您必须在某些方面做出妥协，无论是在设计方面（我认为这是最佳选择）还是在标记方面。

请确保在不同的浏览器中对此进行彻底测试。我最近尝试使用CSS旋转图像。在Chrome上它看起来不太理想（尽管我认为上一个版本解决了这个问题），在iPad上它看起来非常糟糕（边缘一点也不反别名）。看，这不是质量问题。这只是为了让它发挥作用。如果我担心质量的话，我会用后面的黑色边框旋转我的图像。我不太确定要求是什么？你想让盒子换个角度吗？如果现在你可以使用box-shadow。是的，我需要一个不同角度的盒子。阴影在图像后面形成一个平行的盒子。谢谢！我可以接受：p+1的解释：）干杯！我不知道浏览器将这些伪类呈现为元素。

 div:before{ content:'before'; } 
 div:after{ content:'after'; }