CSS Skew在IE9中创建灰色线条
CSS Skew在IE9中创建灰色线条
提问于 2013-03-30 04:00:01
我正在尝试垂直堆叠的三个div的CSS布局。顶部和底部的div是倾斜的。正文是水平的，其大小随所加载的内容而变化。我已经能够在除IE9之外的所有现代浏览器中实现这一点，我尝试重叠div来覆盖灰线。这是可行的，但因为我使用的是不透明，所以div重叠的地方会变暗，这也是很糟糕的。都会很感谢你的帮助。
这行代码：
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 200px;
left: 300px;
height: 200px;
position: relative;
background-color: rgba( 0, 26, 159, 0.7)
}
#top{
transform: skew(8deg, 0deg);
-ms-transform: skew(-8deg, 0deg);
left: 314px;
}
#bottom{
transform: skew(8deg, 0deg);
-ms-transform: skew(-8deg, 0deg);
left: 286px;
}
#middle{
height: auto;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle">
Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />
Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />Test text<br />T
</div>
<div id="bottom"></div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2013-04-02 07:20:51
由于IE9可以处理透明图像，因此我们生成了具有所需不透明度的图像，并使用该图像代替了CSS3。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15710573
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号