Question

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

我已经尝试将变换旋转添加到我添加背景的地方，但它没有旋转回来。另外，对于尺寸我尝试了背景大小来调整它，也没用。

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

提前谢谢！

缺口

Answer 1

您无法独立于附加的元素旋转CSS背景。

您能够做到这一点的唯一方法是将旋转的内容放在现有内容中的附加元素中，并且只旋转内部元素。

例如：

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

现在，当你的内容旋转时，你的背景将保持静止。

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

希望有所帮助。

Answer 2

好吧，我尝试了一段时间来使用纯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;
}

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

2 个答案: