0
페이드 효과를 줄 수 있도록 하단에 선형 그래디언트가있는 div 태그를 디자인하려고합니다.아래쪽 테두리는 Internet Explorer 7에서 그래디언트가있는 배경 이미지 만 사용합니다.
아래 CSS를 사용하여 Chrome, Internet Explorer 10, Firefox 등에서 할 수있었습니다.
필자는 인터넷 익스플로러 7에서 필터와 progId를 사용했으나 하단이나 상단뿐만 아니라 전체 div에 배경을 제공합니다.
불행히도 Internet Explorer 7이 CSS background-size 속성을 읽지 않기 때문이라고 생각합니다.
누구든지 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>
'background-position : bottom;'시도 했습니까? – Joum
당신은 아마 이미이를 봐 왔지만, 참조를 위해 도움이 될 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size – Joum
사람들은 IE 7- – Itay