【问题标题】:CSS Background Image with Horizontal Gradient具有水平渐变的 CSS 背景图像
【发布时间】:2012-02-20 13:02:21
【问题描述】:

我在使用带有渐变的图像作为主菜单栏的背景图像时遇到问题。

这是背景图片:

您可能知道,图像有 2 个渐变,第一个是最左侧,第二个是右侧 3/4。我想要达到的效果是这样的:

有人知道这样做的最佳做法吗?我知道唯一的问题是浏览器的宽度,我需要确保最左边的部分以非常浅的灰色开始。最右边的是深灰色。

我遇到的另一个问题是主页的中心渐变:

这稍微容易一些,可以通过 CSS 渐变来完成。但是,我一直在尝试设置渐变从中心开始,在黄色 div 后面。

如果有人知道实现这一目标的最佳方法,那就太好了。

提前感谢您的帮助。

【问题讨论】:

    标签: background-image gradient css


    【解决方案1】:

    如果只是将图像用作背景图像?

    <div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div> 
    

    【讨论】:

    • 抱歉,您的回复延迟回复,我会尝试您的建议。将更新结果。谢谢。
    【解决方案2】:

    要纯粹在 css 中实现这一点,您可以制作两个容器,每个容器都有一个渐变,这样它们就可以改变宽度并且看起来仍然相同。

    例如

    HTML:

    <div id="container">
       <div id="gradient1"></div>
       <div id="gradient2"></div>
    </div>
    

    CSS:

    .container { ..... }
    .gradient1 {width:60%; float:left; GRADIENT}
    .gradient2 {width:40%; float:left; GRADIENT}
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-08-29
      • 1970-01-01
      • 1970-01-01
      • 2012-10-15
      • 2016-02-13
      • 2012-12-29
      • 2021-07-24
      相关资源
      最近更新 更多