フェード効果を与えるために、下部に線形グラデーションを持つ div タグを設計しようとしています。
以下の CSS を使用して、Chrome、Internet Explorer 10、Firefox などでこれを行うことができました。
Internet Explorer 7 のフィルターと progId を使用しましたが、下または上だけでなく、div 全体に背景を与えます。
background-size残念ながら、Internet Explorer 7 は CSSプロパティを読み取らないためだと思います。
行を div タグの一番下に配置する方法を知っている人はいますか?
<!DOCTYPE html>
<html>
<head>
<style>
div
{
padding:20px 40px;
overflow: hidden;
background-image: linear-gradient(90deg, #000, #FFF, #000), linear-gradient(90deg, #000, #FFF, #000);
background-image: -webkit-linear-gradient(90deg, #000, #FFF, #000), -webkit-linear-gradient(90deg, #000, #FFF, #000);
background-image: -webkit-gradient(linear, 90deg, #000, #FFF, #000), -webkit-gradient(90deg, #000, #FFF, #000);
background-image: -moz-linear-gradient(90deg, #000, #FFF, #000), -moz-linear-gradient(90deg, #000, #FFF, #000);
background-image: -o-linear-gradient(90deg, #000, #FFF, #000), -o-linear-gradient(90deg, #000, #FFF, #000);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
background-size: 100% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
width: 100%;
background-color: #111111;
color:#ffffff;
}
</style>
</head>
<body bgcolor="#111111;">
<div>Example of what it looks like in Chrome, FF etc.</div>
</body>
</html>