這兩天在寫官網(wǎng),標(biāo)題標(biāo)語(yǔ)之類的文字都是帶有流光溢、炫酷圖案的文字

大致就像蘋果官網(wǎng)上的那些slogan吧,可不是簡(jiǎn)單的漸變色之類哦

但是由于使用了CSS3屬性,所以要考慮到兼容性,僅Webkit內(nèi)核的瀏覽器適用

效果如下:

設(shè)計(jì)師隨后給我發(fā)來(lái)了一個(gè)圖案background.jpg:

就拿這張圖做背景,即可實(shí)現(xiàn)需求,

具體操作如下:

影像隨用隨取

這個(gè)解決方案是參考一位網(wǎng)友的,他在文章中提到:

"由于是css3的,所以有些瀏覽器不支持,而且text-till-color:transparent是Webkit內(nèi)核的私有屬性,所以其他非webkit瀏覽器可能不行."

抽空查了查css3,

background-clip指背景剪裁的位置.

比如:通常為盒子添加背景色后,整個(gè)盒子包括邊框在內(nèi),都后有背景色;

可一旦添加上background-clip屬性,

如background-clip: padding-box; 那么背景只在padding到content的區(qū)域顯示,邊框不顯示背景圖;

如?background-clip: content-box;那么背景只顯示在content區(qū)域,其以外均不顯示背景圖;

上面代碼background-clip: text;表示只為文本添加背景圖

background-origin指背景圖顯示的位置,

padding-box

背景圖像填充框的相對(duì)位置

border-box

背景圖像邊界框的相對(duì)位置

content-box

背景圖像的相對(duì)位置的內(nèi)容框

這個(gè)屬性私以為也可以不寫~~~

text-fill-color,文本填充顏色,通常設(shè)為transparent,透明色;?這個(gè)屬性對(duì)于我寫的那個(gè)效果,私以為也可以不寫~~~

最常見(jiàn)的漸變色文字效果,就脫離不了text-fill-color的功能

background-image:-webkit-linear-gradient(#eee,#000);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

總結(jié)

以上是生活随笔為你收集整理的css背景上能添加文字,CSS3怎么为文字添加背景?的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。