css之文本溢出处理 | 背景图片处理
文本溢出處理
單行文本用縮略符號——text-overflow:ellipsis;
多行文本做截斷策略——line-height * 行數 = height;text-overflow:hidden;
背景圖片處理相關屬性
1、background：設置對象的背景樣式，是一個復合屬性，可以用于同時設置背景色、背景圖片、背景重復模式等屬性。
該復合屬性可以分開寫為以下幾個屬性：
?????? background-color：設置背景色。如果同時設置了背景色和背景圖片，則背景圖片將覆蓋背景色。
?????? background-image：設置背景圖片。該屬性需要使用url()函數指定圖片地址，圖片地址既可以是相對地址，也可以是絕對地址。
?????? background-repeat：用于設置對象的背景圖片是否平鋪。在指定該屬性之前，必須先指定background-image屬性。其屬性值有repeat（平鋪）、no-repeat（不平鋪）、repeat-x（僅在橫向平鋪）和repeat-y（僅在縱向平鋪）。CSS 3 為該屬性新增了space和round，這兩個屬性值用于保證圖片不會被裁減。其中，round通過自動調整背景圖片的大小來達到目的，而space是調整背景圖片的間距。
2、background-attachment：用于設置背景圖片是隨對象內容滾動還是固定的。
???? 該屬性支持以下兩個值：
???? scroll：指定背景圖片會隨元素里內容的滾動而滾動。是默認值。
???? fixed：背景圖片固定，不會隨元素里內容的滾動而滾動。
3、background-position：用于設置對象的背景圖片位置。該屬性需要橫坐標和縱坐標兩個值。（當一個網頁中的小圖標非常多時，通常會使用雪碧圖以達到減少加載網頁圖片時對服務器的請求次數的目的，在使用雪碧圖時，就需要使用background-position來定位顯示出相應的小圖標）
除了以上幾個屬性外，CSS 3 中新增了幾個背景相關屬性。
4、background-clip：用于設置背景圖片的覆蓋范圍
該屬性支持以下幾個屬性值：
- border-box:指定背景覆蓋盒模型的邊框區（border）、內填充區（padding）、內容區（content）
- no-clip：指定背景覆蓋盒模型的邊框區（border）、內填充區（padding）、內容區（content）
- padding-box：指定背景覆蓋盒模型的內填充區（padding）、內容區（content）
- content-box：指定背景覆蓋盒模型的內容區（content）
盒模型相關概念請查看：https://www.cnblogs.com/web12/p/9925742.html
5、background-origin：用于設置背景覆蓋的起點
????? 該屬性支持以下幾個屬性值：
- border-box:指定背景圖片從邊框區開始覆蓋
- padding-box：指定背景圖片從內容填充區開始覆蓋
- content-box：指定背景圖片從內容區開始覆蓋
6、background-size：用于設置背景圖片的大小
? 該屬性由兩個值組成，分別代表圖片的寬度、高度。可以設置具體的長度值，也可以指定百分比（為它所在元素的寬或高的百分比），還可以設置為auto（指定背景圖片保持縱橫比縮放，寬度、高度只能有一個被指定為auto，表明寬度、高度會以保持縱橫比的方式自動計算出來）。
CSS3允許為以上幾個屬性指定多個屬性值（屬性值之間以英文逗號隔開）以此來實現多背景圖片的效果。
?
CSS3還為背景提供了線性漸變和徑向漸變支持，使得開發者可以進行更多靈活的背景設置。
7、linear-gradient設置線性漸變
語法格式為：background-gradient：linear-gradient（漸變方向，顏色列表）
方向參數支持如下：
| 角度 | 用英文 | 作用 |
| 0deg | to top | 從上到下 |
| 90deg | to right | 從左到右 |
| 180deg | to bottom | 從上到下 |
| 270deg | to left | 從右到左 |
| ? | to top left | 右下角到左上角 |
| ? | to top right | 左下角到右上角 |
CSS3還提供了repeating-linear-gradient設置循環線性漸變，這種漸變將會循環利用給出的漸變顏色。下面頁面代碼示范了循環線性漸變的功能。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 循環線性漸變 </title><style type="text/css">/* 為div元素增加邊框 */div{height: 400px;width: 400px;}</style> </head> <body> 黑、白、洋紅循環線性漸變 <div id="test" style="background:repeating-linear-gradient(black, white 10%, magenta 20%);"></div> <!-- 為input滑動事件（range）綁定onchange事件處理器 --> 角度：<input style="width:360px" type="range" min="0" max="360" value="0"onchange="change(this.value);"> <script type="text/javascript"> function change(val){var s = "linear-gradient(" + val + ", red, blue)";document.getElementById("test").style.background = "repeating-linear-gradient(" + val + "deg, black, white 10%, magenta 20%)"; } </script> </body>代碼效果：
?
- 使用radial-gradient設置線性漸變
其語法格式如下：
background：radial-gradient（形狀？大小？at x坐標 y坐標，顏色列表）
radial-gradient語法格式可分為4個部分
- 形狀：指定徑向漸變的形狀，目前支持circle和ellipse兩種形狀。該屬性值可以被省略，如果省略，將由瀏覽器感覺被添加背景的HTML元素的形狀來決定漸變的形狀。
- 大小：指定徑向漸變的大小。這部分也可以省略，如果省略，也將由瀏覽器來決定，通常會占滿整個HTML元素。
- 圓心：圓心部分必須由at關鍵字開頭，后面緊跟圓心的x坐標和y坐標。這部分也可以省略，如果省略，則默認為HTML元素的中心。x坐標和y坐標支持如下寫法：
- left：代表x坐標的最左邊
- center：可代表x左邊和y坐標的中間
- right：代表x坐標的最右邊
- top：代表y坐標的最頂部
- bottom：代表y坐標的最底部
- 數值：支持長度值和百分比，可代表x左邊和y坐標的值
- 顏色列表：可以指定多個顏色
?
?
?
總結
以上是生活随笔為你收集整理的css之文本溢出处理 | 背景图片处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【代码笔记】iOS-点击城市中的tabl
- 下一篇： JeDate日期控件，未选择日，出现un