摘要:的那些屬性背景的意思常用的六個屬性背景顏色背景圖像圖片位置圖片是否重復圖片定位,背景裁剪。當不存在數值的時候,順序無所謂。疑問的復合屬性如何寫呢解答先考慮是否圖片重復,在考慮位置。
background的那些屬性
background:背景的意思
常用的六個屬性
1.background-color:背景顏色 2.background-image:背景圖像 3.background-position:圖片位置 4.background-repeat:圖片是否重復 5.background-attachment:圖片定位(fixed,scroll) 6.background-clip: 背景裁剪。有三個屬性值為 border-box(圖片或者顏色從邊框開始); padding-box(圖片或者顏色從padding部分開始); content-box圖片或者顏色從content部分開始);
疑惑點1:圖像和顏色到底是從邊框開始的?還是從內容開始的?
解答:背景圖像和顏色默認是從border開始鋪上去的。如果沒有border就從下一級開始。
運行效果圖:
疑惑點2:如果想設置圖像開始的位置怎么辦?
解答:
background-clip: 背景裁剪。有三個屬性值為
border-box(圖片或者顏色從邊框開始);
padding-box(圖片或者顏色從padding部分開始);
content-box圖片或者顏色從content部分開始);
疑惑點3:background-position的屬性值有那些寫法?
解答:定位是從border的左上角開始。background-position:x,y;
第一個值是距離左邊的距離
第二個值是距離上邊的距離
x:left,center,right
y:top,center,bottom
background-position:10px; 只有一個值時,默認第二個值是center
background-position:10px bottom;
background-position: bottom 10px ;當存在數值的時候,順序寫錯則不顯示。存在數值時順序必須寫對。要按照前面是x值,后面是y值來寫。eg:background-position: 10px bottom ;才正確。
background-position: bottom right;當不存在數值的時候,順序無所謂。
疑問4: background的復合屬性如何寫呢?
解答:background:先考慮是否圖片重復,在考慮位置。
Title 效果圖為:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115938.html
摘要:的那些屬性背景的意思常用的六個屬性背景顏色背景圖像圖片位置圖片是否重復圖片定位,背景裁剪。當不存在數值的時候,順序無所謂。疑問的復合屬性如何寫呢解答先考慮是否圖片重復,在考慮位置。 background的那些屬性 background:背景的意思常用的六個屬性 1.background-color:背景顏色 2.background-image:背景圖像 3.background-po...
摘要:控制表單控件的禁用狀態(tài)。這個符號只有會識別漸進識別的方式,從總體中逐漸排除局部。接著,再次使用將和分離開來,這樣已經獨立識別。生成相對定位的元素,相對于其正常位置進行定位。元素不能用作語義用途以外的其他目的。 HTML、CSS部分 要點:對Web標準的理解、瀏覽器差異、CSS基本功:布局、盒子模型、選擇器優(yōu)先級及使用、HTML5、CSS3、移動端開發(fā) 技術等 1.Doctype作用? ...
摘要:控制表單控件的禁用狀態(tài)。這個符號只有會識別漸進識別的方式,從總體中逐漸排除局部。接著,再次使用將和分離開來,這樣已經獨立識別。生成相對定位的元素,相對于其正常位置進行定位。元素不能用作語義用途以外的其他目的。 HTML、CSS部分 要點:對Web標準的理解、瀏覽器差異、CSS基本功:布局、盒子模型、選擇器優(yōu)先級及使用、HTML5、CSS3、移動端開發(fā) 技術等 1.Doctype作用? ...
摘要:中是這樣定義的屬性指定一個元素應沿其容器的左側或右側放置,允許文本和內聯元素環(huán)繞它。其同樣適用于設置屬性為絕對定位或固定定位的內聯元素。至于為什么,可以理解為內聯元素沒有盒模型,其高度由內容決定。 白話:即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后,這是自己寫的第四篇CSS相關的文章,文章絕大部分是自己工作總結得來,另一部分是平日sf回答的與面試中向面試官交流學到的,都是一...
閱讀 2081·2021-11-02 14:48
閱讀 2760·2019-08-30 14:19
閱讀 2928·2019-08-30 13:19
閱讀 1296·2019-08-29 16:17
閱讀 3229·2019-08-26 14:05
閱讀 2985·2019-08-26 13:58
閱讀 3075·2019-08-23 18:10
閱讀 1102·2019-08-23 18:04