网站建设中使用CSS写背景渐变颜色

时间:2020-02-28   来源:霍尔果斯市外贸网站建设

很多时候我们在做网站前端页面开发时,我们都是用单纯的颜色来作为背景,比如说白色,黑色,蓝色等。

但是有时候如果在定制开发的时候,设计师发来的设计稿,背景颜色为渐变色。

此时我们考虑到有两种解决方案。


1:背景直接用图片,即渐变的背景图片。

QQ截图20200228104802.jpg

比如说我们先准备一张这样从左到右渐变的背景图片命名为bg1.jpg

然后在CSS中这样写:

.bg1{
   width:100%;
   height:30px;
   background:url(bg1.jpg) no-repeat;
}



2: 我们利用CSS 3的新特性直接用CSS写渐变背景。

.bg{
   width:100%;
   height:30px;
    background-color: #29bbc3!important;
    background: -moz-linear-gradient(left, #29bbc3!important 0%, #7dd5d5 100%);
    background: -webkit-gradient(linear, left left, left right, color-stop(0%,#29bbc3), color-stop(100%,#7dd5d5));
    background: -webkit-linear-gradient(left, #29bbc30 0%,#7dd5d5 100%);
    background: -o-linear-gradient(left, #29bbc3 0%,#7dd5d5 100%);
    background: -ms-linear-gradient(left, #29bbc3 0%,#7dd5d5 100%);
    background: linear-gradient(to right, #29bbc3 0%,#7dd5d5100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29bbc3', endColorstr='#7dd5d5',GradientType=0 );
}


如此,背景渐变效果就实现了。

在网站建设过程中,如果你有其他问题,欢迎与我们交流。这里是深圳黑马视觉网站建设。

声明:本站部分文章和图片来源于网络,如果侵犯到了您的权益,请联系我们,我们会及时删除。

TAG: 品牌网站建设 SEO优化推广 小程序开发 云服务器 电子商务平台 数据 免费 目标 业务 电商 分析 城市 集团 支持 关键 布局 搜索引擎 提高 时代 标准