我被说服可以使用：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: ".";} <!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/
添加了div(对不起:-)
总结以上是内存溢出为你收集整理的html – 纯CSS中旋转图像背后的纯色背景全部内容，希望文章能够帮你解决html – 纯CSS中旋转图像背后的纯色背景所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）