摘要:靈活的背景定位靈活的背景定位實現效果將背景圖定位到距離容器底邊且距離右邊的位置。棋盤實現效果實現代碼關鍵樣式其它樣式偽隨機背景偽隨機背景實現效果重復平鋪的幾何圖案很美觀,但看起來可能有一些呆板。
實現效果:
將背景圖定位到距離容器底邊 10px 且距離右邊 20px 的位置。
background-position 方案
實現代碼:
海盜密碼
div {
/* 關鍵樣式 */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
/* 其它樣式 */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}
實現要點:
background-position
允許我們指定背景圖片距離任意角的偏移量,只要我們在偏移量前面指定關鍵字。本例就是設置背景圖片離右邊緣 20px,離底邊 10px。background-position
這種語法的瀏覽器,提供一個合適的回退方案,那就是使用 background
的 bottom right
來定位,雖然不能設置具體的偏移量。background-origin 方案
實現代碼:
海盜密碼
div {
/* 關鍵樣式 */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
padding: 10px 20px;
/* 其它樣式 */
max-width: 10em;
min-height: 5em;
color: white;
font: 100%/1 sans-serif;
}
實現要點:
background-origin
默認值是 padding-box
,也就說我們設置 background
為 top left
時左上角是 padding box(內邊距的外沿框)的左上角。background-origin
為 content-box
,那么就相對于 content box(內容區的外沿框)的左上角,那么也就是背景圖離容器的右邊和底邊的偏移量是跟著容器的 padding 值走了,那設置 padding: 10px 20px;
自然就可以實現本例的效果了。calc() 方案
實現代碼:
海盜密碼
div {
/* 關鍵樣式 */
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 10px);
/* 其它樣式 */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}
實現要點:
calc
來動態計算使得背景圖的左上角水平偏移 100% - 20px
,垂直偏移 100% - 10px
。水平條紋
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
linear-gradient(#fb3 50%, #58a 0)
生成一個背景圖,該背景圖分為上下不同實色的兩部分,占滿容器大小。background-size:100% 30px;
設置該背景圖的寬高(寬為容器寬度,高為30px),由于默認情況下背景是重復平鋪的,這樣整個容器就鋪滿高為 30px 的雙色水平條紋。垂直條紋
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
linear-gradient(to right, #fb3 50%, #58a 0)
生成一個背景圖,該背景圖分為左右不同實色的兩部分(to right
改變漸變的方向,從上下該為左右),占滿容器大小。background-size:30px 100%;
設置該背景圖的寬高(寬為 30px,高為容器高度),由于默認情況下背景是重復平鋪的,這樣整個容器就鋪滿寬為 30px 的雙色水平垂直條紋。斜向條紋
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 42.4px 42.4px;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0)
生成一個如下圖的可重復鋪設的背景圖(重點是修改漸變方向為 45 度,四條條紋)。background-size: 42.4px 42.4px;
設置背景尺寸。42.4px
是通過勾股定理求得(在我們的斜向條紋中,背景尺寸指定的是直角三角形的斜邊長度,但條紋的寬度實際上是直角三角形的高,所以要讓條紋寬度為 15px,就必須近似設置背景尺寸為 42.4px)。可靈活設置角度的斜向條紋
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px);
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
repeating-linear-gradient
生成色標是無限循環重復的,直到填滿整個背景。不需要通過 background-size
設置背景尺寸,而且也不用考慮斜邊的問題,因為在漸變軸設置的長度就是條紋的寬度。最重要的一點是可以靈活設置任意角度的條紋,只要修改一處角度就可以。網格
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
波點
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
radial-gradient
來創建圓形、橢圓,或者它們的一部分。本例使用它實現圓點的陣列。棋盤
實現效果:
實現代碼:
div {
/* 關鍵樣式 */
background: #eee;
background-image:
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現效果:
重復平鋪的幾何圖案很美觀,但看起來可能有一些呆板。其實自然界中的事物都不是以無限平鋪的方式存在的。即使重復,也往往伴隨著多樣性和隨機性。因此為了更自然一些,我們可能需要實現的背景隨機一些,這樣就顯得自然一點。
實現代碼:
div {
/* 關鍵樣式 */
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;
/* 其它樣式 */
width: 300px;
height: 200px;
}
實現要點:
摘自:《CSS揭秘》 第 2 章 背景與邊框
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/2286.html
摘要:層疊即表示允許以多種方式來描述樣式,一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間,而不是立即生效。比如,將元素的顏色從白色改為黑色,通常這個改變是立即生效的,使用后,將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要:任何方向上都不重復只讓背景圖片顯示一次。,背景圖片就會以段落的中心點為起點。第一個值表示水平位置,第二個值表示垂直位置。拉大圖片,使其完全填滿背景區保持寬高比。提示漸變是幫我們生成的背景圖片。 在CSS里面,每個元素盒子都可以想象成由兩個圖層組成。 前景層:內容(如文本或圖片)和邊框。 背景層:用實色填充(使用 background-color 屬性),也可以包含任意多個背景圖片(...
摘要:通過的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類,通過實例化來生成各種樣式的餅圖。以前一直用做餅圖的效果,但有時候,一些比較簡單的餅圖用的話有點殺雞用牛刀的感覺。并封裝了一下,支持多種樣式,寫了一個。 通過css3的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類,通過實例化來生成各種樣式的餅圖。 以前一直用highcharts做餅圖的效果,但有時候,一些比較簡單的餅圖用highcharts...
摘要:通過的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類,通過實例化來生成各種樣式的餅圖。以前一直用做餅圖的效果,但有時候,一些比較簡單的餅圖用的話有點殺雞用牛刀的感覺。并封裝了一下,支持多種樣式,寫了一個。 通過css3的旋轉屬性來實現餅圖的效果。封裝了一個餅圖類,通過實例化來生成各種樣式的餅圖。 以前一直用highcharts做餅圖的效果,但有時候,一些比較簡單的餅圖用highcharts...
摘要:重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結 由于最近在準備前端方面的面試,所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上),有許多地方敘述的并不是十分詳細,只是大致的描述一下,給自己提供一個知識輪廓。本篇中主要描述...
閱讀 1629·2019-08-30 15:54
閱讀 2374·2019-08-30 15:52
閱讀 2048·2019-08-29 15:33
閱讀 3042·2019-08-28 17:56
閱讀 3237·2019-08-26 13:54
閱讀 1675·2019-08-26 12:16
閱讀 2449·2019-08-26 11:51
閱讀 1645·2019-08-26 10:26