【问题标题】:multiple background images with linear gradient overflow具有线性渐变溢出的多个背景图像
【发布时间】:2017-02-22 00:33:41
【问题描述】:

我的codepen 显示了此介绍页面背景图片,其中包含第二张包含线性渐变的多背景图片。问题是当浏览器调整大小时,图像会缩小并且线性渐变保持相同的高度。如何动态更改渐变高度以匹配第一个背景图像高度?

注意:我不想使用background-size: cover,因为它会截断太多图像。

导航栏和背景图像之间的主体间隙(颜色:#454545)似乎对 codepen 很特殊。在本地运行网页时没有出现。

【问题讨论】:

    标签: css twitter-bootstrap-3 background-image


    【解决方案1】:

    根据我的经验,当周围环境发生变化时,CSS 并没有那么灵活。我想到了两个解决方案。

    1. 使用JS根据当前框大小动态添加内联CSS
    2. 根据您的需要创建多媒体查询

    【讨论】:

    • 我将使用 javascript 进行调查。最终也会添加媒体查询,因为我希望显示既响应又自适应。
    • 这是一个新的codepen 来显示我用来根据图像大小调整元素大小的 JS。希望这对某人有所帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-13
    • 1970-01-01
    相关资源
    最近更新 更多