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