在CSS中创建可变宽度渐变填充
我目前正在建设一个WordPress主题，我希望有一个标题(在WordPress，而不是超文本标记语言意义)，适合从角落到角落在页面的顶部。锚定最左边的将是一个在其右侧用纯色填充的图像。锚定最右边的将是一个在其左侧用纯色填充的图像。
我想做的是用渐变填充中间的空间，不管浏览器的宽度，渐变从左边的颜色无缝地褪色到右边的颜色。有没有办法通过CSS做到这一点？
回答 3
Stack Overflow用户
发布于 2009-02-27 18:34:43
将渐变作为GIMP格式的图像(一个像素高)并查看http://www.cssplay.co.uk/layouts/background.html
Stack Overflow用户
发布于 2009-02-27 18:36:08
没有一种纯CSS的方法可以做到这一点，但是使用CSS的一种解决方案是制作一个宽度足够大的背景图像，使其伸展到当前浏览器的宽度。
另一种方法是在GIF中制作一个越来越透明的背景图像，并设置您选择的背景颜色。
参见this或this。
Stack Overflow用户
发布于 2009-02-27 19:15:11
这里有一种不需要图像的方法。你可以认为这是一种黑客行为，但在某种程度上，它完成了工作。根据需要调整渐变中的步数。如果您希望它自动缩放以填充窗口，请使用更多<b>元素，并且不要将边框用作渐变步骤之一。然后使用百分比宽度调整<b>元素的大小。如果你想保持较小的下载大小，你甚至可以使用Javascript生成渐变。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.grad b {
display: block;
float: left;
width: 16px;
height: 100%;
border-left-width: 16px;
border-right-width: 16px;
border-left-style: solid;
border-right-style: solid;
border-left-color: #FF0000;
background-color: #EE0011;
border-right-color: #DD0022;
}
.grad b+b {
border-left-color: #CC0033;
background-color: #BB0044;
border-right-color: #AA0055;
}
.grad b+b+b {
border-left-color: #990066;
background-color: #880077;
border-right-color: #770088;
}
.grad b+b+b+b {
border-left-color: #660099;
background-color: #5500AA;
border-right-color: #4400BB;
}
.grad b+b+b+b+b {
border-left-color: #3300CC;
background-color: #2200DD;
border-right-color: #1100EE;
}
.grad b+b+b+b+b+b {
border: none;
background-color: #0000FF;
}
.grad {
float: left;
font-size: 100%;
height: 30px;
}
</style>
</head>
<body>
<div class="grad">
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
</body>
</html>https://stackoverflow.com/questions/595948
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号