当前位置:首页 >  站长 >  建站经验 >  正文

Css3之background-image的深层次理解

 2018-09-06 08:05  来源: 用户投稿   我来投稿   妮可妮可的个人主页 撤稿纠错

  短视频,自媒体,达人种草一站服务

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

第一种方法:用background-image:url()

这种方法是大家最常用的方法,大部分都会用,我也就不再多家赘述。直接上干货。

第二种方法:用base64编码,直接设置背景图像

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

第三种方法:用渐变颜色作为背景图像

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

第四种方法:设置背景图像组

在我们进行网页设计的过程中,有时可能会碰到一个地方需要使用好几个背景图片的情况。那这时我们该怎么办呢?难道要分别使用两个background-image属性,然后定义两个背景图片吗?一旦这样设置的话,后一个设置的background-iamge属性值,就会直接把前一个覆盖掉,是不能设置成功的。解决这种问题的方法就是设置背景图像组,其设置方法是:bakeground-image:url(1),url(2),url(3)。哪个图片地址写在前面,哪个图片就会出现上边。用这种方法定义背景图片,就可以给同一个元素定义多个背景图片而不会相互覆盖,可以做出很多有意思的效果来。

以上就是今天给大家介绍的background-image属性的几种使用方法,希望大家看过这篇文章之后,能获得新的感悟,总结出新的经验,谢谢大家的观看。

文章来自妮可妮可动漫网:http://www.nikenike.cn/。转载请标明出处,谢谢。

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

作者: 妮可妮可    /    文章:6篇

相关标签
网站设计心得

相关文章

  • 5条最佳网站设计技巧和建议

    一个成功的网站不仅需要引人注目的风格,还需要精彩的内容。网站的设计不仅要为用户提供专业的知识,同时要让用户了解真个网站的主题。本文列出了5个最佳网站设计技巧和网站设计实例,可以帮助初学者设计一个成功的网站。

    标签:
    网站设计心得
  • 吸引用户的网站设计方案

    没有在什么类型的网站上,颜色必须符合匹配标准。如果网站被破坏并且不符合客户对颜色的美学要求,该网站将很难得到他们的青睐。色彩匹配一直是网站设计中最具影响力的视觉元素。该网站包含不同的布局部分。

    标签:
    网站设计心得
  • 网站设计迎合用户浏览习惯 需要这样做

    现在是一个知识爆炸的时代,尤其是互联网,每天都要更新大量的内容,对于用户而言,也在不断的适应这种知识爆炸的时代,网站主要是依托内容吸引用户的,很多人不理解,为什么,同样的关键词,需要不断的重复更新

    标签:
    网站设计心得
  • 网站设计尊重用户体验 如何运用好峰终定律

    看完一本小说,不可能把所有的情节和故事都记住,而不同人对一部小说的记忆点也是不同的,当然,如果汇集一部分的阅读体验,可以找到一些共性,那就是有一些情节,大家都容易记住,今天我们要谈论的就是这个记忆点,传说中的峰终定律。

    标签:
    网站设计心得
  • 网站设计趋势:把复杂留给自己 把简单留给用户

    最近在今日头条听了一个培训音频,叫说书,意思大概是现在的书太多了,很多人想读书却没有时间,就诞生了这样的一个职业,把一个本的内容简单的概括一下,然后通过音频的方式传播给大家,据说,这是目前一个很火的职业!

    标签:
    网站设计心得
  • 搭建网站如何避免知识产权纠纷?

    知识产权一般都是对最终使用人进行约束和追责,因此你付费委托第三方搭建网站,但并不代表你自身就能免除侵权责任,更何况大部分建站合同对于因搭建网站所造成的知识产权侵权完全没有任何约定!

  • 从零开始自己创建一个网站的操作指南

    随着互联网时代的发展,无论是个人还是企业,都想拥有一个自己的网站,通过网站快速展示自己的商品信息。有很多人不了解一个网站是如何形成的,制作一个网站需要多少时间,具体由哪些细节都是全然不知。他们甚至感觉搭建一个网站是一件非常复杂的事情,其实,网站建设并没有那么复杂,也没那么简单。其实现在做一个基本使用

  • 商城系统建设心得,轻松搞定选择困难

    商城软件的后续服务也是一个非常关键的地方。所以服务好的电商软件提供商会更靠谱些。至于怎么判断软件提供商服务是否靠谱?我的建议是多与在线客服直接交流,看他们回复水平与服务质量,从细节入手进行判断。

    标签:
    商城系统
  • PageAdmin CMS站群系统教程:网站站群的添加和管理

    pageadmincms是一个很知名的cms网站管理系统,目前在国内拥有超过数百万的用户,很多人用来搭建博客网站,做府门户,学校门户,也可以构建信息门户网站,这个系统后台有很灵活的扩展性

热门排行

信息推荐

扫一扫关注最新创业资讯