Question

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

但我没有得到结果。

我在这里摆弄Link

这是

的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);
}

Link to the jsFiddle

Answer 2

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

背景图像应使用css对角线

2 个答案: