holder – 图像展位符
本文最后更新于 43 天前,其中的信息可能已经有所发展或是发生改变。

Holder 使用 SVG 在浏览器中呈现图像占位符。

占位符选项

占位符选项通过 URL 属性设置,例如 holder.js/300x200?x=y&a=b . 多个选项由 & 字符分隔。

  • theme :用于占位符的主题。 例子: holder.js/300x200?theme=sky
  • random :使用随机主题。 例子: holder.js/300x200?random=yes
  • bg : 背景颜色。 例子: holder.js/300x200?bg=2a2025
  • fg :前景(文本)颜色。 例子: holder.js/300x200?fg=ffffff
  • text :自定义文本。 例子: holder.js/300x200?text=Hello
  • size :自定义文本大小。 默认为 pt 单位。 例子: holder.js/300x200?size=50
  • font :自定义文本字体。 例子: holder.js/300x200?font=Helvetica
  • align :自定义文本对齐方式(左,右)。 例子: holder.js/300x200?align=left
  • outline :为占位符绘制轮廓和对角线。 例子: holder.js/300x200?outline=yes
  • lineWrap :最大线条长度与图像宽度的比率。 例子: holder.js/300x200?lineWrap=0.5

主题

Holder 包括对主题的支持,以帮助占位符融入您的布局。

有 6 个默认主题: skyvinelavagrayindustrialsocial

文本

Holder 会自动为超出图像边界的文本添加换行符。 如果文本太长,超出了水平和垂直边界,则将文本移到顶部。 如果您更喜欢控制换行符,您可以 \ntext 属性中添加:

<img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.">

如果您想禁用换行,请将 nowrap 选项设置为 true

<img data-src="holder.js/300x200?text=Add \n line breaks \n anywhere.&amp;nowrap=true">

使用该 text 选项时,不显示图像尺寸。 要将尺寸重新插入到文本中,只需使用特殊的 holder_dimensions 占位符即可。

<img data-src="holder.js/90px80p?theme=sky&text=Placeholder dimensions: holder_dimensions">

由于 SVG 对跨域资源链接的限制,使用自定义字体的占位符默认使用画布呈现。 如果您只使用本地可用的字体,您可以通过 在 选项中设置 noFontFallback 为来禁用此行为。 但是,如果您需要使用外部加载的字体呈现 SVG 占位符,则必须使用 标签而不是 标签,并将 类添加到适当的 标签中。 这是一个例子: true Holder.run object img holderjs link

<head>
<link href="http://.../font-awesome.css" rel="stylesheet" class="holderjs">
</head>
<body>
<object data-src="holder.js/300x200?font=FontAwesome"></object>

重要提示: 在本地测试时,字体 URL 必须定义一个 httphttps 协议。

重要提示: 从公共注册表以外的位置(即 Google 字体、Typekit 等)提供的字体需要设置正确的 CORS 标头。 有关更多详细信息,请参阅 如何将 CDN 与 Webfonts 一起使用

<object> 占位符像 <img> 占位符一样工作,其 DOM 的额外好处是能够被检查和修改。 与 <img> 占位符一样, data-src 属性比 data 属性更可靠。

标题:holder – 图像展位符
地址:https://xiaodongxier.com/1803.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇