V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
linfox
V2EX  ›  问与答

有做前端的v友吗。请问如何不用图片实现这种效果?

  •  
  •   linfox · 2013-12-05 12:01:16 +08:00 · 2979 次点击
    这是一个创建于 3766 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在客户在做企业站,客户要求实现类似如图的效果。

    但是我发现图片中的那些图标,思维导图都不是不是图片的格式。

    我右键去点击没有“下载图片选项”。
    另外我把整个网页下载下来,图片包里也没有该张图片。
    请问如何实现类似效果??

    图片如下:




    网页原地址:

    http://www.asiaqualityfocus.com/about-aqf
    http://www.asiaqualityfocus.com/inspection-services
    14 条回复    1970-01-01 08:00:00 +08:00
    raincious
        1
    raincious  
       2013-12-05 12:03:45 +08:00   ❤️ 1
    Icon最简单的应该是字体。圆角可以border-radius,尖角可以width:0px; height:0px; border: 0; border-left: 50px solid #eee;

    楼主换上IE6就知道哪些是图片,那些是CSS布局了。
    raincious
        2
    raincious  
       2013-12-05 12:05:11 +08:00
    哦我错了,尖角可以width:0px; height:0px; border: 50px solid #fff; border-left: 50px solid #eee;。但是上面的尖角是不规则的(不是45度),这个我真不知道怎么做到。
    qqwerr
        3
    qqwerr  
       2013-12-05 12:05:55 +08:00
    用chrome右键一下不就出来了嘛。。

    background-position: -5px -1654px;
    background-image: url("/images/front/sprite-front.png");
    background-repeat: no-repeat;
    所以还是图片:
    http://www.asiaqualityfocus.com/images/front/sprite-front.png
    haker
        4
    haker  
       2013-12-05 12:09:28 +08:00
    楼上正解
    haker
        5
    haker  
       2013-12-05 12:10:52 +08:00
    lizheming
        6
    lizheming  
       2013-12-05 12:40:46 +08:00
    ls两个正解..另外吐槽一下,谁说背景图右键的话会出现保存选项的...
    skydiver
        7
    skydiver  
       2013-12-05 12:42:33 +08:00
    @lizheming 背景图就是没有保存选项啊,除非装插件
    Seita
        8
    Seita  
       2013-12-05 12:43:04 +08:00
    楼上全部正解。
    lizheming
        9
    lizheming  
       2013-12-05 12:49:12 +08:00
    @skydiver 我就是这个意思,lz不是说没出现保存才认为不是图片的么..所以小小的吐槽了一下。
    chairuosen
        10
    chairuosen  
       2013-12-05 14:05:00 +08:00
    不用图的话,可以用svg
    66beta
        11
    66beta  
       2013-12-05 14:07:19 +08:00
    两个都是背景图,最原始的CSS
    linfox
        12
    linfox  
    OP
       2013-12-05 14:24:54 +08:00
    谢谢楼上的热心V友。原来是背景图。谢谢大家哦!
    zakokun
        13
    zakokun  
       2013-12-05 15:44:21 +08:00
    你搞前端不用fireBug 吗?用fireBug看看马上就发现了
    LcaKen0day
        14
    LcaKen0day  
       2013-12-06 15:08:37 +08:00
    chrome F12
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1000 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:11 · PVG 06:11 · LAX 15:11 · JFK 18:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.