首頁 > 後端開發 > php教程 > javascript - 像我发的图片上这种文字效果有可能用程序输出来吗?

javascript - 像我发的图片上这种文字效果有可能用程序输出来吗?

WBOY
發布: 2016-06-06 20:44:21
原創
798 人瀏覽過

如图
比如我网站后台有一个textarea,我输入的文字,有可能在图片上输出这种效果吗?
PHP \ JS \ CSS3 都可以
javascript - 像我发的图片上这种文字效果有可能用程序输出来吗?

回复内容:

如图
比如我网站后台有一个textarea,我输入的文字,有可能在图片上输出这种效果吗?
PHP \ JS \ CSS3 都可以
javascript - 像我发的图片上这种文字效果有可能用程序输出来吗?

可以用CSS。

字周边发光可以用text-shadow: 0px 0px 5px rgba(80,80,250,.8);(颜色调的不好,可以自己试)

文字模糊这个比较复杂。chrome和safari可以用以下CSS解决:

<code class="lang-css">  -webkit-filter: blur(5px);
  /* 以下几句目前没人支持 */
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
</code>
登入後複製

但是firefox目前不支持filter: blur。但是可以用svg filter:

<code>filter: url(blur.svg#effect);
</code>
登入後複製

然后创建blur.svg:

<code><svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="effect">
       <fegaussianblur stddeviation="5"></fegaussianblur>
   </filter>
</svg> 
</code>
登入後複製

而IE 9以前的版本可以用以下CSS:filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

至于IE 10, 11。。。它们移除了微软自己的filter的支持,但又没有添加对CSS filter和svg blur的支持,所以是没法模糊的。用png吧。

参考:
http://caniuse.com/#search=blur
https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板