jquery - 背景图像应该使用 css 成对 Angular 线

Question

我正在处理我的作品集。我在正文中有图像我希望图像应该只使用 css/css3/Jquery 对 Angular 线而不是通过 photoshop 编辑我已经尝试对正文使用变换旋转。

但我没有得到结果。

我这里有 fiddle 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

如果你想将它应用到 body ，你需要使用伪元素，而不是使用子元素，如 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