欢迎光临乌鲁木齐市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

网站建设中使用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 );
}


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

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

新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top