我尝试在 CSS 中构建一个漂亮的渐变,就像在 PhotoShop 中构建的这个:
但是当我尝试在 CSS 中创建一个时,我总是在线性渐变背景的末尾看到一条白线:
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: transparent; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
</head>
<body>
</body>
</html>
要完全理解:这条线不是真的,它是我的渐变的反作用,它是一条假线!但它仍然是我想抹去的东西。 我相信在 CSS 中有更好的事情要做,不是吗?
最佳答案
改变
background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 25%);
到
background: -webkit-linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, rgba(24,54,85,1.00), transparent 100%);
关于线性渐变背景末尾的CSS阴影白线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50352442/