网站建设中使用CSS写背景渐变颜色
时间：2020-02-28 来源：本站
很多时候我们在做网站前端页面开发时，我们都是用单纯的颜色来作为背景，比如说白色，黑色，蓝色等。
但是有时候如果在定制开发的时候，设计师发来的设计稿，背景颜色为渐变色。
此时我们考虑到有两种解决方案。
1：背景直接用图片，即渐变的背景图片。
比如说我们先准备一张这样从左到右渐变的背景图片命名为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 );
}
如此，背景渐变效果就实现了。
在网站建设过程中，如果你有其他问题，欢迎与我们交流。这里是深圳黑马视觉网站建设。