CSS-backgroound和radial-giadient的常見用法

前言

這裡主要介紹下css中background和radial-giadient徑向漸變的使用，工作中用到的地方可能也不太多，但是每次用到了都需要查閱官網，查資料就比較麻煩，這裡記錄一下我自己整理的常見用法，方便日後使用吧！這裡省去了一些特別特別基礎的使用語法。

自己根據兩個屬性實現的一些簡單的效果
background的語法使用
radial-giadient的語法使用

正文

根據background和radial-gradient實現的一些簡單效果

　　2.background的語法使用

　　　　background屬性

- - background-color : 定義元素的背景顏色
    - - background-color 設定的只是背景顏色， background 設定的是整個背景
      - 當元素本身設定了background-img 屬性時，如果設定了background-color,圖片不會被覆蓋，background-color會在image底層，而過設定的是background，那麼圖片會被覆蓋掉
  - background-image：定義圖片為背景，多張圖片時需要寫多個url
    - - 當設定了visibility:hidden與display:none對background-image的影響
        
        background-image對應的是一張靜態資源圖片，當頁面渲染前會請求這張圖片的資源來進行載入渲染
        
        visibility:hidden 元素仍然再dom樹中，只是不顯示而已，display:none,元素不存在與dom樹中
        
        當元素visibility：hidden時，這張圖片資源仍然會請求，但是顯示不出來，當設定了display:none這張圖片不會請求，也不會顯示
        
        一種特殊場景如果也i按出現了滾動條，那麼滾動條下面（即檢視之外）的background-image靜態資源回不回請求呢，答案是會的，只要元素存在與dom樹上，不論顯示還是隱藏，其一欄的background-image資源都將會請求回來
  - background-position：設定圖片的起始位置，定義的background-image在容器中的位置，對background-color無效
  - background-repeat：設定背景圖片是否以及如何平鋪，值針對background-image的平鋪，對background-color無效
  - background-size：設定背景圖片的尺寸，有四種植，如果要設定size的值，需要緊跟在position後面並且用"/"隔開
    - - 　length：設定【怕【影像的高寬，圖片會根據高寬發生扭曲，通常使用的時候只需要設定一個值，以免圖片發生扭曲
      - percentage：以父元素的百分比設定高寬，同上
      - cover 把背景圖片擴充套件到足夠大，以使背景圖片覆蓋整個背景區域，影像不會發生扭曲，內容區域全部有背景圖片，但是可能背景圖片不全，只是其中的一部分
      - contain ：設定背景圖片擴充套件到最大尺寸，使得其高寬全適應內容區域，圖片不會發生扭曲，但是肯能一部分割槽域沒有背景圖
  - background-origin：設定背景圖片的背景區域
    - - border-box：預設值，背景繪製在邊框的方框內
      - padding-box：背景繪製在襯距方框內
      - content-box：背景繪製在內容方框內
  - background-clip：規定背景的繪製區域
  - background-attachment：設定背景影像是否固定或者隨著頁面的滾動而滾動，定義background-image是否跟隨容器的滾動而滾動，對background-color無效
    - - scroll:預設值，背景影像會隨著頁面其餘部分的滾動而滾動
      - fixed:當頁面的其餘部分滾動時，背景影像不會移動
      - inherit:規定應該從父元素繼承background-attachment屬性的設定

實現上面第一個效果的寫法：　　　　　

.mydiv{

width: 500px;

height: 500px;

margin: 500px auto;

border: 10px solid pink;

background-color: salmon;

background-image: url(../img/myflaw.png), url(../img/paper.png);

background-position:center center,right bottom;

background-repeat:no-repeat,repeat;

background-attachment: inherit;

}

補充一個transparent常見用法

　　　　background :transparent代表背景透明

　使用場景：如果一個元素在另一個元素之上，而你想顯示下面的元素，這時你就需要把上面的元素的bangckground設定為transparent，這就像常見的你點選儲存二維碼一樣，有時候其實是兩張圖片，你看到的是下面的一張圖片，點選儲存的是上面的二維碼的圖片。

　　3.radial-giadient的語法使用

　　 radial-gradient函式用於徑向漸變建立影像

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

　　徑向漸變由中心點定義

為了建立徑向漸變你必須設定兩個終止色

三個引數

　　shape:確定圓的型別：elipse：預設值，指定橢圓形的徑向漸變 circle：指定圓形的徑向漸變

　　size:定義漸變的大小，可能值：

farthest-corner:(預設),指定徑向半徑長度從圓心到離圓心最遠的角

closest-side:指定徑向漸變的半徑長度從圓心到離圓心最近的邊

closest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

　　position d定義漸變的位置，可能值：

center:（預設）設定中間為徑向漸變圓心的座標值

top：設定頂部為徑向漸變的縱座標值

bottom:設定底部為徑向漸變的原型的縱座標值

　　start-color,....,last-color 用於徑向漸變的起止顏色

常見的用法一：效果圖上圖2

 <div class="mydiv">
        <div class="innerdiv">
            <div>123456789</div>
            <div>123456789</div>
        </div>
    </div>


 .mydiv{
            height: 220px;
            width: 220px;
            border: 1px solid pink;
            padding: 10px;
            margin: 0 auto;
            background: radial-gradient(transparent  10px, powderblue  10px);
            background-size: 22px 22px;
            background-position: 10px 10px;
            box-shadow: 0 4px 16px #333333;
        }
        .innerdiv{
            height: 220px;
            background-color: powderblue;
        }

常見的用法二：效果圖上圖3

<div class="wrap">
        500元
 </div>


.wrap{
            position: relative;
            margin: 100px auto;
            height: 160px;
            width: 400px;
            background-image: radial-gradient( circle at 0.5px 8px ,transparent 6px,#ff9e6d 6px,#ff9e6d),radial-gradient( circle at 199.5px 8px ,transparent 6px,#ff9e6d 6px);
            background-size: 200px 18px;
            background-position: 0 0 , 200px 0;
            background-repeat: repeat-y;
            font-size: 60px;
            color: #fff;
            font-weight: bold;
            line-height: 160px;
            padding-left: 40px;
            box-sizing: border-box;
            cursor: pointer;
        }
        .wrap::before {
            position: absolute;
            content: "";
            left: 240px;
            top: 0;
            bottom: 0;
            width: 0;
            border-left: 1px dashed #fff;
        }
        .wrap::after {
            position: absolute;
            content: "立即領取";
            font-size: 26px;
            width: 70px;
            top: 50%;
            right: 2%;
            transform: translate(-50%, -50%);
            line-height: 40px;
            letter-spacing: 5px;
        }

常見的用法三：效果圖上圖4

<div class="color-text">
        hello world!
</div>



.color-text{
            width: 700px;
            font-size:100px; 
            font-weight: 600; 
            background:-webkit-linear-gradient(left, #FB1616, #F3167C 10%, 
            #5A28F3 20%,#2099EF 30%, #096B7B 40%,#5EE626 50%, #B7D416 60%, 
            #E0AC1A 70%, #EF6F14 80%,#B90F4E 90% );
            color:transparent;
            /* 以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。 */
            -webkit-background-clip: text;
            margin: 100px auto;
        }

還有很多炫酷的用法，比如電子回單裡面邊框條紋，信封的手撕特效都是由css完成的，歡迎各位大佬提出寶貴的意見。

CSS-backgroound和radial-giadient的常見用法

相關文章