Html + Css：如何创建自动调整大小的旋转背景？

Question

想象一个完整的黑色网页。在此网页上有一个 100% 大小的白色 div 填充整个页面。我想将这个 div 旋转 -7 度（或逆时针 7 度）。 这将导致黑色背景在边缘的三角形中可见，就像您将一张纸放在桌子上并将其稍微向左转动一样。

实际上，这可以通过一些 css 来完成，而且效果很好（IE 除外）。

现在真正的问题是： 我希望在其顶部有一个正常的、非旋转的 div 元素来显示内容，以便仅旋转背景。

但是，逆向旋转包含的 div 不起作用，因为通过这两种转换，文本在所有浏览器中都会变得模糊。

我怎样才能意识到这一点？ 最好的解决方案是在当前的 Webkit 浏览器、FF3.5+ 和 IE7+ 中工作。如果只有 IE8+ 我也能忍受。

Answer 1

尝试使用

#content {

 position: absolute;
 z-index: 500;
 margin-left: auto;
 margin-right: auto;
}

#background {
//Your white DIV
}


<div id="background"></div>

<div id="content">
 Lorem ipsum
</div>

Answer 2

在背景上使用 position:absolute; 并在后面使用 z-index 。
这是一个示例。

Answer 3

您必须将其旋转回来... http://jsfiddle.net/gFCHE/
在 Chrome 或 ChromeOS 上一点也不模糊。它也不应该在其他任何地方。

将 overflow:hidden 添加到 #crooked 以获得炫酷的图像效果。
此 CSS 可以帮助您入门，但您需要对其进行调整才能按您的需要工作。

<div id='wrap'>
    <div id='cooked'>
        <div id='straight'>
        </div>
    </div>
</div>


  #wrap{
    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    color:#f00;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}

裹{

    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    background:#fff;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}
#straight{
     -moz-transform: rotate(7.0deg);  /* FF3.5+ */
       -o-transform: rotate(7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.0deg);  /* IE9 */
          transform: rotate(7.0deg);  
         filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;