Html + Css:如何创建自动调整旋转大小的背景？
Html + Css:如何创建自动调整旋转大小的背景？
提问于 2011-03-05 22:23:01
想象一个完整的黑色网页。在这个网页上是一个100%大小的白色div，充满了整个页面。我想将这个div旋转-7度(或逆时针7度)。这将导致黑色背景在边缘的三角形中可见，就像您将一张纸放在桌子上并将其稍微向左旋转一样。
实际上，这可以用一些css来完成，而且工作得很好(IE除外)。
现在真正的问题是:我想在上面有一个普通的，非旋转的div元素来显示其中的内容，这样只有背景是旋转的。
反向旋转包含的div是行不通的，因为通过两次转换，文本在所有浏览器中都会变得模糊。
我怎么才能意识到这一点呢？最好的解决方案是在当前的Webkit浏览器、FF3.5+和IE7+上工作。如果只有IE8+，我也能接受。
回答 3
Stack Overflow用户
发布于 2011-03-05 22:32:31
尝试使用
#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>Stack Overflow用户
发布于 2011-03-05 22:36:45
在后台使用position:absolute;，在后台使用z-index。Here is an example.
Stack Overflow用户
发布于 2011-03-05 22:51:16
你得把它转回来。在Chrome或ChromeOS上，http://jsfiddle.net/gFCHE/一点也不模糊。它也不应该在其他任何地方。
将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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5204361
复制相关文章
相似问题
腾讯云开发者
