1

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

我已经尝试将变换旋转添加到我添加背景的位置，但它没有旋转回来。同样对于我尝试背景大小来调整它的大小，也没有工作。

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

提前致谢！

缺口

4

2 回答 2

1

您不能独立于它所附加的元素旋转 CSS 背景。

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

例如：

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

现在您的背景将保持静止，而其中的内容会旋转。

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

希望有帮助。

于 2013-09-24T14:00:04.863 回答
1

好吧，我尝试了一段时间来获得一个使用纯 CSS 和 HTML 的版本，但我无法做到。我相信双伪选择器（又名::afterand ::before）将使其成为可能，但我认为您目前无法在一个对象中使用纯 CSS 来做到这一点。

话虽如此，我使用一个元素完成它的方式是更常见的方式 - 通过使用canvas. 有了画布，它变得非常简单。希望评论能让人容易理解

现场演示在这里

// 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;
}
于 2013-09-24T22:21:04.227 回答