模板:文字模糊/doc

出自魔学

藉由 CSS3 text-shadow 屬性實現的模糊效果。與 {{模糊}}、{{黑霧}} 等模板等價。

Template:注意 現已知在iOS、iPadOS和MacOS的Safari上無法刮開模糊,但是指針懸停模式正常,如需解決可查看#Apple刮開模糊臨時措施。

參數

除數字參數 1 以外均為可選參數。

  • 數字參數 1:要模糊的文字內容。
  • 數字參數 2:指針懸停在文字上時顯示的內容(對移動設備不友好)。默認為 你知道的太多了。
  • 參數 sdcolor:模糊文字所使用的顏色。默認為 grey。
  • 參數 sdsize:模糊的距離,數值越大越模糊。默認為 10px。
  • 參數 css:自定義其他 CSS 樣式。
  • 參數 hover:為true時,開啟hover模式,鼠標放置於文字之上時可以漸變解除模糊,撤下時恢復模糊。hover模式中sdsize參數無效。
  • 數字參數 time:當hover為true時,設置漸變動畫的時長。單位秒,默認為0.75秒。

用法示例

  • 指針懸停模式。因前述兼容性問題,建議優先考慮加入hover=true參數。

{{文字模糊|如果你摘下眼镜后就是这种效果,那么恭喜你:你已经自带5像素的高斯模糊了|hover=true}} 如果你摘下眼鏡後就是這種效果,那麼恭喜你:你已經自帶5像素的高斯模糊了

  • 常規用法。

{{文字模糊|犯人就是他↗|假的,哎哟我眼睛业障重啊}} 犯人就是他↗

  • 指定文字顏色與模糊程度。

{{文字模糊|新版刮刮乐|sdcolor=#7BCC83|sdsize=3px}} 新版刮刮樂

  • 現暫無法在模板中直接加入鏈接(萌百娘)。請配合 {{coloredlink}} 使用。(藍鏈為 #0645AD,紅鏈為 #BA0000)

{{文字模糊|{{coloredlink|rgba(0,0,0,0)|萌百娘}}|sdcolor=#0645AD}} 萌百娘

Apple刮開模糊臨時措施

如需要,可選擇在您的個人JS中添加:

if ( /Macintosh|iPhone|iPad/.test(navigator.userAgent) ) {
	mw.loader.addStyleTag('.wenzimohu, .wenzimohu * { transition-duration: 0.75s; }');
	mw.hook('wikipage.content').add(function ($content) {
		$content.find(".wenzimohu , .wenzimohu *").filter(function () {
			return $(this).css("color") == "rgba(0, 0, 0, 0)";
		}).hover(function () {
			$(this).css( "color", ($(this).css("text-shadow").match(/rgb\(.*?\)/) || ["inherit"])[0]);
		}, function () {
			$(this).css("color", "rgba(0, 0, 0, 0)");
		});
	});
}