获取渐变以与背景颜色一起使用
现在我有一个按钮的 CSS:
background: #19558D url(../images/gradient.gif) repeat-x top left;
出现渐变,但背景颜色没有出现。当我重新加载页面时,颜色会出现一瞬间,但随后消失为渐变。我怎样才能让他们两个都工作?
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
好吧,你有几个选择:
1。仅使用图像:
您可以通过编辑渐变来完成这项工作,使其看起来完全符合您的喜好,而无需任何新的 CSS。 (这将是您用来解决问题的方法)。
2.使用顶部图像,其余部分为纯色:
这会将
url
中的图像放置在顶部,并使元素的其余部分为某种纯色。请注意,如果图像覆盖所有元素并且不透明,则纯色将不可见。3.使渐变透明/alpha:
如果渐变覆盖了所有元素,您可以将其设置为透明或半透明,以便 CSS 背景颜色在其后面可见。例如,如果你制作一个从黑色到透明的渐变,然后添加一个白色的 CSS bg,那么你将得到一个黑色到白色的渐变。请注意,唯一适用于此方法的图像是
.png
图像,因为它们是唯一支持 Alpha 级别(部分透明度)的图像。Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
This will place the image in
url
at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are
.png
ones because they are the only ones that support alpha levels (partial transparencies).GIF 是透明的吗?我使用 PNG 格式,因为 PNG-24 允许 alphablending 蒙版,而 GIF 仅支持透明或不支持 (1/0)
但我认为您需要发布指向它的链接或它的外观图像,包括 GIF。
我们需要一些像素规格,例如宽度和高度才能完全理解问题。
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.