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