亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css 背景和漸變

k00baa / 1866人閱讀

css 背景和漸變 background 背景

所有背景屬性都不能繼承

在CSS2.1里，background屬性的簡寫方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position

CSS3開始，又增加了3個新的屬性值
注意：反斜杠可以在支持這種寫法的瀏覽器里在position后面接著寫background-size

background: [background-color] 
            [background-image] 
            [background-repeat]
            [background-attachment] 
            [background-position] / [ background-size]
            [background-origin] 
            [background-clip];

background-color 背景色
不能繼承，其默認值是 transparent

background-image 背景圖片
默認值是 none

可設(shè)置多幅背景圖片 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

background-repeat 背景圖片平鋪
其值可為 （ repeat | no-repeat | repeat-x | repeat-y ）

默認為repeat

background-attachment 背景關(guān)聯(lián)

如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

其值可為 （ fixed | scroll ）

默認值是 scroll，背景會隨文檔滾動

可以聲明圖像相對于可視區(qū)是固定的（fixed）

background-position 背景定位

不超過兩個關(guān)鍵字，水平方向和垂直方向

只出現(xiàn)一個關(guān)鍵字，另一個認為是center

其值可為 （ top，bottom，left，right，center，長度值，百分數(shù)值 ）

默認為 0% 0%，即top left ，元素內(nèi)邊距區(qū)的左上角(padding-box)

background-size 背景圖像尺寸

默認值auto，寬度和高度，只有一個值，第二個被設(shè)置為auto

其值可為 （ 長度值，百分數(shù)值，cover ，contain ）

cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域

background-origin 定位中心點

注意：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒有效果

默認值 padding-box

其值可為 （ padding-box | border-box | content-box ）

background-clip 背景的繪制區(qū)域

默認值 border-box ，背景被裁剪到邊框盒

其值可為 （ border-box | padding-box | content-box ）

背景定位

background-position 擴展語法

> 允許我們指定背景圖片`距離任意角的偏移量`,`在偏移量前面指定關(guān)鍵字`

background-position: right 20px bottom 10px;

需要提供一個合適的回退方案,在不支持 background-position 擴展語法的瀏覽器中,背景圖片會緊 貼在左上角(背景圖片的默認位置)

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

background-origin

問題：偏移量與容器的內(nèi)邊距一致

默認情況下,background-position 是以 padding box 為準的

如果把background-origin值改成 content-box,則在 background-position 屬 性中使用的邊角關(guān)鍵字將會以內(nèi)容區(qū)的邊緣作為基準(也就是說,此時背景 圖片距離邊角的偏移量就跟內(nèi)邊距保持一致了)

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
background-origin: content-box;

calc()

background: url("code-pirate.svg") no-repeat; 
background-position: calc(100% - 20px) calc(100% - 10px);

偽隨機背景 
重復(fù)平鋪的圖案有一定規(guī)律可循，如下面代碼
background: linear-gradient(90deg,
                            #fb3 15%, #655 0, 
                            #655 40%,#ab4 0, 
                            #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;

每80px（即 background-size 的值）重復(fù)一次

方法：

把平鋪間距最大的貼片安排在最頂層
仍然可以看出圖案每隔 240px 就會重復(fù)一次,

貼片（多層漸變合成的最終圖案中可感知的重復(fù)單元）的尺寸實際上就是所有 background-size 的最小公倍數(shù)

background: hsl(20, 40%, 90%);
background-image:
 linear-gradient(90deg, #fb3 10px, transparent 0),
 linear-gradient(90deg, #ab4 20px, transparent 0),
 linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

把貼片的尺寸最大化
“蟬原則”：數(shù)字最好是“相對質(zhì)數(shù)”，在這種情況下，它們的最小公倍數(shù)就是它們的乘積

要達成相對質(zhì)數(shù)，最簡單的辦法就是盡量選擇質(zhì)數(shù)，因為質(zhì)數(shù)跟其他任意數(shù)字都是相對質(zhì)數(shù)

gradient 漸變

linear-gradient 線性漸變

語法 ： background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法,必須放最后 */
+ direction/angle 方向或角度
    - direction 使用方向
        + 預(yù)定義方向 left,top等
        + 可為起始方向 (left 從左到右 ) | (left,top 對角)
        + 可定義到達方向 - 使用 to 表示 (to right) | (to right bottom ) 
    - angle 使用角度
        * 角度是指水平線和漸變線之間的角度，逆時針方向計算
        * 0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變
        ![角度 對應(yīng) 方向](http://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg)
+ 至少定義兩種顏色結(jié)點(起點色，中止色)
    - 設(shè)置透明度可為 rgba() 
    - 可指定起止色位置，百分比或長度值 
        + (red 30%,blue 50%) ，則30%-50%間是兩種顏色的漸變，其余部分為實色
        + 如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設(shè)置為它前面所有色標位置值的最大值
background: linear-gradient(#fb3 33.3%, #58a 0, 
                            #58a 66.6%, yellowgreen 0);

等同于：

background: linear-gradient(#fb3 33.3%, #58a 33.3%, 
                            #58a 66.6%, yellowgreen 66.6%);

repeating-linear-gradient 重復(fù)的線性漸變

適用于斜向條紋

為這些長度是直接在漸變軸上進行度量的，直接代表了條紋自身的寬度

不論條紋角度如何，在創(chuàng)建雙色條紋時都需要四個色標

background: linear-gradient(45deg,
                            #fb3 25%, #58a 0, 
                            #58a 50%,#fb3 0, 
                            #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

等同于：

background: repeating-linear-gradient(45deg,
                                      #fb3, #fb3 15px, 
                                      #58a 0, #58a 30px);

同色系條紋（明亮度有差異）

主色調(diào)和淺色變體組成
方法是：把最深的顏色指定為背景色，同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋
修改時，只需改動背景色

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

radial-gradient 徑向漸變

語法：background: radial-gradient(position, shape size, start-color, ..., last-color);

repeating-radial-gradient 重復(fù)的徑向漸變

background-image: repeating-radial-gradient(red,green 40px, orange 80px);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116521.html

相關(guān)文章

  • [譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色

    摘要：屬性值則依賴于我們需要創(chuàng)建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應(yīng)商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設(shè)計師和開發(fā)者們都是通過切圖來實現(xiàn)漸變背景。 背景對網(wǎng)站的設(shè)計有重大的影響。它有利于建立網(wǎng)站的整體感覺，設(shè)置分組，分配優(yōu)先級，對網(wǎng)站的可用性也有相當大的影響。 在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

    bang590 評論0 收藏0

  • [譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色

    摘要：屬性值則依賴于我們需要創(chuàng)建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應(yīng)商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設(shè)計師和開發(fā)者們都是通過切圖來實現(xiàn)漸變背景。 背景對網(wǎng)站的設(shè)計有重大的影響。它有利于建立網(wǎng)站的整體感覺，設(shè)置分組，分配優(yōu)先級，對網(wǎng)站的可用性也有相當大的影響。 在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

    jk_v1 評論0 收藏0

  • [譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色

    摘要：屬性值則依賴于我們需要創(chuàng)建什么樣的漸變背景，例如線性漸變或放射性漸變。我們會在線性漸變中介紹不同種類的供應(yīng)商前綴，但為了簡便起見，放射性漸變中我們不會再提及。線性漸變多年來，設(shè)計師和開發(fā)者們都是通過切圖來實現(xiàn)漸變背景。 背景對網(wǎng)站的設(shè)計有重大的影響。它有利于建立網(wǎng)站的整體感覺，設(shè)置分組，分配優(yōu)先級，對網(wǎng)站的可用性也有相當大的影響。 在CSS中，元素的背景可以是一個純色，一張圖，一個漸變...

    Tonny 評論0 收藏0

  • CSS 設(shè)計指南 學習筆記 二

    摘要：原文地址本篇文章是筆者的設(shè)計指南學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對設(shè)計指南進行一些總結(jié)，沒有看之前第一部分的話也可以從這里傳送過去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設(shè)計指南》 學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對 ...

    printempw 評論0 收藏0

  • CSS斜切角

    摘要：問題斜切角在設(shè)計和印刷中是相當受歡迎的樣式。當斜切角只存在元素的一側(cè)，并且每個都占據(jù)元素的高度的時候，一個箭頭的形狀產(chǎn)生了，這在按鈕和面包屑導(dǎo)航中非常受歡迎?，F(xiàn)在，假設(shè)我們需要兩個斜切角，左右下角分別一個。 問題 斜切角在Web設(shè)計和印刷中是相當受歡迎的樣式。它通常是在一個或多個元素的角落切一個45°的角（也就是所謂的斜切角）。特別是最近，扁平化設(shè)計的勢頭壓過了擬真設(shè)計，也使這種效果...

    番茄西紅柿 評論0 收藏0

  • CSS漸變之背景、邊框、字體漸變

    摘要：使用實現(xiàn)背景色漸變邊框漸變，字體漸變的效果。定義漸變的顏色，可以使用百分比指定漸變長度。比如則變成了醬子背景色漸變非常簡單，但上面的代碼中，是加在屬性上的。被切割的個部分分布在邊框的個區(qū)域。 使用CSS實現(xiàn)背景色漸變、邊框漸變，字體漸變的效果。 背景色漸變 .bg-block { background: linear-gradient(to bottom, #F80, #2ED);...

    wapeyang 評論0 收藏0

發(fā)表評論

0條評論

k00baa

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<