正在加载....
厦门网站建设-世敏网络科技
  • 当前位置: 首页 > 建站百科 > 常见问题
  • 图片占位符工具placehold.it

    时间:2020-01-03 浏览量:

    最近在学习新技能的时候,发现了一个图片占位符工具,感觉挺好用的,分享给大家,这个工具就是 placehold.it。用法很简单,只需要在 placehold.it 的 URL 后面加上图片尺寸和颜色的参数,就可以快速生成美观的占位图啦。如

      <img src="/uploads/ueditor/20200103/1-2001031A930195.jpg">

    效果为:
    图片占位符工具placehold.it(图1)

      <img src="/uploads/ueditor/20200103/1-2001031A931543.jpg">

    效果为:
    图片占位符工具placehold.it(图2)

    <img src="http://placehold.it/500x200/eeee00/000000?text=placeholder picture">

    效果为:
    图片占位符工具placehold.it(图3)
    主要有以下参数:

    1. 第一个参数是图片尺寸,在 URL 后添加 width x height 即可。如

          <img src="/uploads/ueditor/20200103/1-2001031A93K30.jpg">

      效果为:
      图片占位符工具placehold.it(图4)

    2. 在尺寸参数后面是图片背景色 及文字颜色,在 URL 后继续添加 background-color / text-color
      即可。使用16进制,不需要写 #。 如黑色背景白色文字

      <img src="/uploads/ueditor/20200103/1-2001031A93K30.jpg000000/ffffff">

      效果为:
      图片占位符工具placehold.it(图5)

    3. 图片类型可以放在任意一项参数后面,默认为 gif 格式。如

      <img src="/uploads/ueditor/20200103/1-2001031A93K30.jpg000000.jpg/ffffff">

      效果为:
      图片占位符工具placehold.it(图6)


    4. 最后一个参数是图片上显示的文字,在URL最后添加 ?text=placeholder 即可。空格可以用 + 表示。如

      <img src="/uploads/ueditor/20200103/1-2001031A93K30.jpg000000.jpg/ffffff?text=placeholder">

      效果为:

               图片占位符工具placehold.it(图7)


    加载中~

    您已成功复制微信号,去微信立即添加好友!

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?