获取渐变以与背景颜色一起使用

发布于 2024-10-27 10:15:49 字数 180 浏览 3 评论 0原文

现在我有一个按钮的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

听风吹 2024-11-03 10:15:49

好吧,你有几个选择:

1。仅使用图像:

您可以通过编辑渐变来完成这项工作,使其看起来完全符合您的喜好,而无需任何新的 CSS。 (这将是您用来解决问题的方法)。

2.使用顶部图像,其余部分为纯色:

element{ background:#000 (url) top left repeat-x; }

这会将 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:

element{ background:#000 (url) top left repeat-x; }

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).

情话墙 2024-11-03 10:15:49

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文