这是一个关于网站banner细节文章，现在网页设计通常会按照响应式来设计，而响应式的网站的横幅大多数使用免费高清图片，而且这些图像是全屏的，当网页缩小后，图像会被裁剪，而使用CSS，这就不会了。

我们看到项目官网的BANNER，其实就是通过渐变属性实现。

未处理前：

看上面africacom的banner图像，风景很美，这个确实，但是，我们需要加上BANNER文字内容，所以要增加一个色调蒙版，并且与网站色调一致。

解决方案，利用CSS渐变属性，给图像加入透明色调。

处理后：

通过加入色调，网站与BANNER现在已经融为一体了，（建议查看原网站地址，才能查看最佳效果）

项目名称：非洲国际通信展
项目地址：http://africacomcapetown2017.cn/

作者：UI设计达人
链接：https://www.jianshu.com/p/052f6e9875aa