位置：广州松河 > 技术支持 > 案例：CSS3 菜单线性渐变（linear-gradient）_CSS学习

案例：CSS3 菜单线性渐变（linear-gradient）_CSS学习

来源：网络整理时间：2023/3/4 1:04:57 共 3623 浏览

今天重写模板的时候需要用到这个效果，线性渐变，属于CSS3 linear-gradient写法！

之前已经写过一篇关于：CSS3 经典教程系列：CSS3 线性渐变（linear-gradient）

案例HTML代码：

<div class="box">

 <div class="bg"></div>

 <div class="img">
  img+p
 </div>

 <div class="cname">
   catename
 </div>

</div>

CSS：

.box{width: 100%;height: 165px;position: relative;}

.box .bg{position: absolute;left: 0;top: 0;right: 0;bottom: 0; 

 background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4)); /*Safari、Chrome*/

 background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4)); /*Firefox，Flock*/

 background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4)); /*Opera*/

 background: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.4));

}

.box:hover .bg{

 background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));

 background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));

 background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));

 background: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.2));

}

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：input type="hidden" 作用_ input的属性用法介绍_html标签 | ·下一条：手机浏览器（移动端）去除onclick点击事件后文字出现的背景颜色_CSS学习