如何使用 CSS 应用渐变？答案

【问题标题】：How to Apply Gradient using CSS?如何使用 CSS 应用渐变？
【发布时间】：2015-11-27 19:40:37
【问题描述】：

我在一个 iOS 项目中。我使用支持 HTML CSS JS 的 UIWebView。我有背景。我想让渐变黑到白，它必须是透明的。

其实我会在Future中改变背景，所以它一定会以透明度（渐变）显示背景图像。

其中 Image 在整个背景上的 UIImageView 上，而 UIWebView 是一个子视图。

如果我使用

    NSString *htmlStringQuestion = [NSString stringWithFormat:
    @"<style type='text/css'>* 
    {
        padding:0px; margin:0px;
    }
    div.ContentWrapper {
        width:100%%; height:100%%;
        text-align:center;
        display:table;
    }
    div.ContentArea {
        display:table-cell; 
        vertical-align:middle; 
        padding:0 5%%; 
        background:none;
        background-color: rgba(0, 0, 0, 0.5);
        color: #00000; 
        font-size:30; 
        font-family: Baskerville;
    }
    </style>
    <div class='ContentWrapper'><div class='ContentArea'>
        <p>Hello</p>
    </div>
    </div>", htmlString];

看起来像

任何建议。

但我想要一些黑色到白色的东西，从顶部到白色。

【问题讨论】：

我从未做过 iOS 项目，但从纯 CSS 的角度来看，您似乎正在寻找像 this demo 这样的渐变。这是一种渐变，颜色从顶部的半透明黑色变为底部的半透明白色，并且背景仍然可见。如果这对您有帮助，请告诉我，我会将其添加为答案。（注意： CSS 选项卡中的部分将进入代码中的<style> 标记。）

标签： html ios css objective-c

【解决方案1】：

background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

注意： 我使用Ultimate CSS Gradient Generator 来获取此代码。您可以使用它来生成您喜欢的任何 CSS 渐变。我不隶属于该网站。

【讨论】：

我已经删除了我的答案中不相关的部分。旧版本的 Safari 和 UIWebView 可能需要 -webkit- 前缀。较新的版本（参见代码 cmets）将与无前缀版本一起使用。