背景图片应使用CSS在对角线上

Question

我正在做我的投资组合。 我的身体中有图像，我希望仅使用css / css3 / Jquery时图像应该是对角线的，而不是通过photoshop编辑的，我尝试对身体使用变换旋转。

但是我没有得到结果。

我在这里有小提琴链接

这是CSS代码

.fullimg{
    background:url('http://i.imgur.com/swudrIP.png') no-repeat fixed center;
    -webkit-transform: rotate(15deg);
    width: 100%;
    height: 100%;
    position:absolute;
}

我希望我的输出看起来像下面的CSS类名

.diagonal{
    background:url('http://i.imgur.com/ugmhC7w.png?1') no-repeat fixed center;
    width: 100%;
    height: 100%;
    position:absolute;
}

问候马哈德万

Answer 1

如果希望将其应用于主体，则需要使用伪元素，而不是使用诸如div之类的子元素。

.fullimg:before {
    content:"";
    position: absolute;
    -webkit-transform: rotate(15deg);
    width: 100%;
    height: 100%;
    background-image:url(http://i.imgur.com/swudrIP.png);
}

链接到jsFiddle

Answer 2

看来您正在尝试旋转小提琴中的“身体”。 据我所知，这是不可能的。
尝试将背景放在覆盖整个身体的div标签上，然后旋转它。
另外，不要忘记添加-ms-transform和transform以实现跨浏览器兼容性。