gpt4 book ai didi

internet-explorer - CSS Skew 在 IE9 中创建灰线

转载 作者:行者123 更新时间:2023-11-28 13:08:32 25 4
gpt4 key购买 nike

我正在尝试三个垂直堆叠的 div 的 CSS 布局。顶部和底部的 div 是倾斜的。主体是水平的,意味着大小会随着加载的内容而波动。我已经能够在除 IE 9 之外的所有现代浏览器中使用它。我试图重叠 div 以覆盖灰线。这行得通,但由于我使用的是不透明度,所以 div 在它们重叠的地方变暗,这同样糟糕。非常感谢任何帮助。

行: enter image description here

示例代码:

<!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>

最佳答案

由于 IE9 可以处理透明图像,我们生成了具有所需不透明度的图像,并使用它代替 CSS3。

关于internet-explorer - CSS Skew 在 IE9 中创建灰线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15710573/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com