在旋转的div中旋转背景图像？

Question

我有一个div形状与之前：和之后：所以它看起来像一个十字形状（旋转）。 但现在我的问题是，背景在逻辑上也旋转。我希望背景图像不会旋转，图像应该是div的大小。

我已经尝试添加转换旋转到我添加了背景的位置，但它没有旋转回来。另外对于尺寸我尝试了背景大小来调整它，也没有工作。

这里是我的jsbin：http://jsbin.com/iYogaCE/29/edit

在此先感谢！

缺口

Answer 1

嗯，我试了一段时间才得到一个纯CSS和HTML版本，但我无法这样做。我认为，双伪选择，又名::after和::before，将允许它是可能的，但我不认为，你可以做它在纯CSS中的一个对象目前。通过使用canvas -

有了这样说，它的方式用一个元素是更常见的方式，我完成。用画布变得非常简单。希望这些意见可以很容易地理解

Live demo here

// Gets a list of all the canvases to create an X for 
var canvases = document.getElementsByClassName('profile'); 

// Allows the X to be drawn on multiple canvases without being redrawn 
var tempCanvas = drawX(); 

// Gives the canvases a background image (the person's profile) 
// If you wanted different images for each you could easily create an array 
// and iterate through it for each canvas 
var background = new Image(); 
background.src = "http://asta-design.ch/gameotion/wp-content/uploads/2013/03/placeholder.jpg"; 

// Once the image has loaded, apply the Xs 
background.onload = function() { 

    // Do it for each canvas 
    for(var i = 0, j = canvases.length; i < j; i ++) 
    { 
    // Gets the current canvas and context 
    var canvas = canvases[i]; 
    var context = canvas.getContext('2d'); 

    // Allows the portrait only to be shown through the generated X 
    context.globalCompositeOperation = "destination-atop"; 

    // Draws the profile picture 
    context.drawImage(background, 0,0, canvas.width, canvas.height) 

    // Cuts out everything that is not within the X 
    context.drawImage(tempCanvas, 0, 0); 
    } 
} 

// Creates the X to use as the cut out 
function drawX() { 
    // Creates a hidden canvas to draw the X on 
    var offscreenCanvas = document.createElement('canvas'); 
    var offscreenCtx = offscreenCanvas.getContext('2d'); 

    // The width/height of the original canvas, not sure why "canvas.width" doesn't work here... 
    var size = 200; 
    offscreenCanvas.width = size; 
    offscreenCanvas.height = size; 

    // Creates the rectangles sloped positively 
    offscreenCtx.save(); 
    offscreenCtx.translate(3 * size/4, 3 * size/4); 
    offscreenCtx.rotate(Math.PI/4); 
    offscreenCtx.fillRect(-size/2, -size/2, size * .3, size); 

    // Loads the state before the first rectangle was created 
    offscreenCtx.restore(); 

    // Creates the rectangles sloped positively 
    offscreenCtx.translate(3 * size/4, 1 * size/4); 
    offscreenCtx.rotate(-Math.PI/4); 
    offscreenCtx.fillRect(-size/2, -size/2, size * .3, size); 

    // Returns the canvas with the X 
    return offscreenCanvas; 
} 

Answer 2

您不能独立它连接到该元素的旋转CSS背景。

你将能够做到这一点的唯一方法是有一个额外的元素里面的旋转内容您现有的一个，只有旋转内部元件。

如：

<div>     <-- background applied to this element 
    <div>....</div> <-- but this one is rotated 
</div> 

现在你的背景，而将里面的内容，它旋转保持不变。

如果你不能有任何额外的标记，你仍然可以在不改变HTML的情况下通过使用CSS :before选择器在主元素后面创建一个额外的伪元素来实现。应用背景而不是主要元素;之后，它与我在上面描述的额外标记类似。

希望有所帮助。