三、背景屬性-文本屬性

1、背景樣式

 background-image:url(img/4.jpg);
background-repeat:no-repeat;
background-position:center center;
background-color:pink;
background-attachment:fixed;
background-size:cover;

符合樣式寫法

background: #666 url(‘images/1.jpg’)no-repeat center/cover fixed ;

背景:背景顏色 背景圖片 背景重復(fù) 背景位置/背景大小 背景關(guān)聯(lián)

2、多背景樣式

background:url(img/1.jpg) no-repeat top left/400px auto,url(img/2.jpg) no-repeat top left/500px auto,url(img/3.jpg) no-repeat top left/600px auto;

寫法如上,使用逗號,隔開

3、background-origin:背景圖片起始位置

background-origin:border-box;//從邊框開始放置(會被邊框覆蓋)
background-origin:padding-box;//系統(tǒng)默認從padding處開始(緊貼邊框)
background-origin:content-box;//從內(nèi)容處開始(和邊框會有padding的距離)

4、background-clip:背景圖片超出修剪

background-clip:border-box;//同上超出邊框修剪
background-clip:padding-box;//超出padding
background-clip:content-box;//超出內(nèi)容

5、顏色的漸變

background:-webkit-linear-gradient(position,#fff 30%,#f00 40%,green 80%);

注:第一個屬性代表位置可使用一個top(上)或兩個left top (左上)來表示,后面參數(shù)為顏色個數(shù)不限。若不加百分比,則默認平均分配。加百分比后按照百分比分配。eg:前30%為白色且不變色。30%-40%白色逐漸變?yōu)?f00。40%-80%為#f00變?yōu)榫G色 。之后保持綠色不變。(有點繞)。

(ps:background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));

linear 表示線性、0 0 表示開始位置的x與y的位置,0 100%表示結(jié)束的x與y位置,from(#eee)表示從這個顏色開始,to(#aaa)表示漸變到這個顏色)
注:瀏覽器不兼容可試試( background:-webkit-gradient(linear ,10% 10%,100% 100%,
color-stop(0,rgb(255,0,0)),
color-stop(0.5,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)))
)

6、文本屬性

1、文本順序(從左到右或者從右到左)

direction:rtl;
unicode-bidi:bidi-override;//從右到左顯示文字、默認從左到右這里不做例子

2、多行文本修剪

display: -webkit-box//繼承block的屬性
-webkit-box-ovient: vertical//元素垂直
-webkit-line-clamp: 5//重點顯示行數(shù)
overflow: hidden;//超出影藏
注:若給文本高度,則會有小問題(高度給大會顯示多行高度給小則顯示行數(shù)未達到需要顯示的行數(shù))可不給文本告高度,字適應(yīng)。

3、文字陰影

text-shadow(x y r color);//分別代表x軸y軸陰影半徑和陰影顏色
注: 也可以給多個屬性使用逗號隔開,可實現(xiàn)立體字,霓虹字等效果。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容