欢迎您光临苏州鹅鹅鹅科技有限公司!
电话图标 全国热线:0512-65622224

新闻动态

将想法与焦点和您一起共享

当前位置: 首页 > 新闻动态 > 建站知识 > 查看详情

Css3之background-image的深层次理解

发表日期:2019-07-23 15:38:14 文章编辑: 浏览次数:331

我们大家都知道,background-image这个属性是用来设置背景图片的,一般的写法是background-image:url()。这种写法也是最常用最普遍的方法,可以直接调用图片地址,简单又快捷。但是人力有时穷,何况区区一个属性?下边,我再给大家介绍几种background-image属性的设置方法,希望能帮助大家加深对这个属性的理解。
第一种方法:用background-image:url(),这种方法是大家最常用的方法,大部分都会用,我也就不再多家赘述。直接上干货。

Css3之background-image的深层次理解
 
第二种方法:用base64编码,直接设置背景图像
这种方法的写法是:bakeground-image:url(base64)。这种方法是直接把图片转化成base64编码镶嵌到网页中,用这种方法设置的背景图片,可以减少一个http请求,积少成多,有利于前端优化。但是这种方法也有自己的缺点,base64编码太过冗长,不适用于将太大的图片转换成base64编码。那么该如何将图片转化成base64编码呢?这就需要用到编码转化工具了。大家可以自己到脚本之家在线工具页面去寻找,也可以直接访问这个页面:http://tools.jb51.net/transcoding/base64。

Css3之background-image的深层次理解

 
第三种方法:用渐变颜色作为背景图像
在我们的潜意识里,往往会将渐变颜色误认成是颜色的一种。其实不然,渐变颜色在处理时,是被当成图片处理的。也就是说,在使用渐变颜色的时候,把它当成图片去使用就可以了。根据渐变颜色的这个特性,我们可以用渐变颜色来指定某一元素的背景图像。写法是:background-image:radial-gradient()。

Css3之background-image的深层次理解
第四种方法:设置背景图像组
在我们进行网页设计的过程中,有时可能会碰到一个地方需要使用好几个背景图片的情况。那这时我们该怎么办呢?难道要分别使用两个background-image属性,然后定义两个背景图片吗?一旦这样设置的话,后一个设置的background-iamge属性值,就会直接把前一个覆盖掉,是不能设置成功的。解决这种问题的方法就是设置背景图像组,其设置方法是:bakeground-image:url(1),url(2),url(3)。哪个图片地址写在前面,哪个图片就会出现上边。用这种方法定义背景图片,就可以给同一个元素定义多个背景图片而不会相互覆盖,可以做出很多有意思的效果来。
以上就是今天给大家介绍的background-image属性的几种使用方法,希望大家看过这篇文章之后,能获得新的感悟,总结出新的经验,谢谢大家的观看。
将文章分享到..
相关新闻
最新新闻
最新网站设计案例
提交我的需求
请认真填写需求信息,我们会尽快和您取得联系
官方微信客服
24小时热线电话
  • 0512-65622224
  • 赵经理:
    18014917056
  • 孙经理:
    18118154829
程序类型
*程序类型
APP定制
微信小程序
营销网站
品牌网站
购物网站
响应式网站
手机端应用
定制预算
*5w以下
5w以下
5w~10w
10w~20w
20w以上
姓名
联系电话
*
*我们会在10分钟内与您取得联系。