【问题标题】:CSS3 Gradients by pixel, instead of percentageCSS3 按像素渐变,而不是百分比
【发布时间】:2018-07-27 18:55:24
【问题描述】:

我想创建一个线性渐变背景,无论浏览器窗口大小如何,它都适合,以容纳固定高度的标题、子标题和内容 div。

我的问题是我不希望在移动页面时渐变缩放。我想我可以使用 1 像素宽的图像来获得相同的结果,但我最终希望网站尽可能无图像,除非有徽标。

是否可以使用像素定义的渐变而不是百分比定义的渐变?

【问题讨论】:

    标签: html css


    【解决方案1】:

    是的,你可以。您可以用标准单位代替百分比。看这个例子:

    http://dabblet.com/gist/1856111

    background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%);
    

    【讨论】:

    • 在那个网站上工作,但不是在实践中。 Chrome 和 Firefox 都不会在我的 Mac 上渲染渐变...
    • @JonMitten dabblet 渲染不带前缀。抱歉,我已更新示例以包含它们。
    • 太好了,这太完美了。似乎工作得很好 - 但是,我确实注意到在调整浏览器窗口大小时浏览器呈现“锯齿状”。这可能是我使用的划分级别的结果。我不相信它会分散注意力而不会太重要。
    • 我已经从答案中删除了前缀,因为它们现在不再需要了。
    • 感谢您发布此答案。这确实帮助我为一些自定义页面创建了渐变,其中渐变的特定部分必须与特定内容区域对齐,然后针对移动设备上的各种屏幕尺寸进行调整
    【解决方案2】:

    如果您需要固定大小的渐变,请使用background-size 属性指定其大小。

    【讨论】:

    • 这也是一个不错的选择。使用background-positionbackground-repeat 进行微调。
    猜你喜欢
    • 2014-07-27
    • 2016-08-25
    • 1970-01-01
    • 2014-03-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-25
    相关资源
    最近更新 更多