CSS3之背景 background

時間  2020-03-22
標籤 css3 css 背景 background 欄目 CSS 简体版
原文   原文鏈接

background  

  background是一個簡寫屬性，能夠在一次聲明中定義一個或多個屬性。除去特定的屬性 其餘屬性能夠按任意位置放置。css

background語法：html

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...web

CSS3 background支持多重背景，主要是靠origin、clip和size組成新的background屢次疊加bash

注意

  • background 屬性被指定多個背景層時，使用逗號分隔每一個背景層。每一個屬性用空格隔開
  • 若是有size的值必須緊跟着position，用 / 隔開
  • background-color只能設置一個值 且被包含在最後一層
  • border-box/padding-box/content-box 若是出現一次則同時設置origin和clip，若是出現兩次 第一個指定origin，第二個指定clip
  • 多重背景，其餘屬性只有一個表示全部的背景共用一個屬性的屬性值

background-color

  background-color會設置元素的背景色，屬性的值爲顏色值或者關鍵字「transparent」兩者選其一。background-color的優先級比background-image低，若是同時存在backgound-color和background-image時，image會顯示在color上面字體

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

複製代碼

background-image

  background-image屬性用於爲一個元素設置一個或者多個背景圖像，多個背景圖用','隔開。
background-image: url('xx') || linear-gradient(漸變) || none(無背景圖)
flex

實例 

/* html */
<div class="border-image-color"></div>
/* css */
.border-image-color {
  width: 500px;
  height: 400px;
  border: 20px dashed yellowgreen;
  background-image: url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: lightSkyBlue;
  background-position: -60px -20px;
}
複製代碼

注意

  • background-image的繪製方向在Z軸上堆疊方式，先指定的圖像會在後指定圖像上面
  • background-image繪製在border之下，background-color之上
  • background-image的繪製、顯示位置與background-position、background-clip、background-origin相關

background-origin

  background-origin規定了背景圖片background-image屬性的原點位置的背景相對區域，爲background-position設置初始位置。可是當background-attachment爲fixed時，此屬性將被忽略，不起做用。ui

屬性值： 默認值/padding-box

  • border-box 背景圖片的擺放以border區域爲參考
  • padding-box 背景圖片的擺放以padding區域爲參考
  • content-box 背景圖片的擺放以content區域爲參考

background-position

  background-position爲每一個背景圖片設置初始位置，background-position的原點是background-origin定義的位置，相對偏移量都是以原點爲基準。url

屬性值：默認值/left top

三種取值類型能夠混合使用spa

  • 關鍵字
    • center用來居中背景圖片
    • left、right指定圖片放置於X軸的左右邊緣
    • top、bottom指定圖片放置於Y軸的上下邊緣
  • length 數值+ 'px'，指定相對於X,Y座標的位置
  • percentage 百比分，指定相對於X,Y座標的位置

值個數

  • 關鍵字取單個值，另一個位置默認爲 center
  • length、percentage取一個值 當前值同時指定X軸與Y軸的座標
  • length、percentage取兩個值，第一個值定義X軸的方向、第二值定義Y軸的方向
  • 四個值 position: bottom 10px right 20px; 關鍵字定義位置，length/percentage定義距離

擴展

background-position屬性已經獲得擴展，它容許咱們指定背景圖片距離任意角的偏移量，只要咱們在偏移量(length/percentage)前面指定關鍵字(top,bottom,left,right)3d

percentage語法

  百分比值的偏移指定圖片的相對位置和容器相對位置重合。值0%表示圖片的(左上)邊界與容器(左上)邊界重合，值100%表明圖片的右邊界（或下邊界）和容器的右邊界（或下邊界）重合。值50%則表明圖片的中點和容器的中點重合。

percentage公式：
  (container width - image width) * (position x%) = (x offset value)
  (container height - image height) * (position y%) = (y offset value)    

/* html */
<div class="border-image-color"></div>
/* css */
/*
    圖片寬度： 642px
    容器寬度: 742px
    容器寬度：，容器box-sizing與背景background-origin同步做用
    若想X方向上移動20px：20px / (742px - 642px) = 20%
    X方向上移動20%，實際移動像素值： (742px - 642px) * 20% = 20px
    
    其中若background-origin爲padding-box
    實際容器寬度應爲包裹圖片時原點origin控制的部分
    容器寬度則須要減去邊框40px，實際爲702px，再在X軸移動20%時實際移動的像素：
    (702px - 642px) * 20% = 12px
*/
.border-image-color {
  box-sizing: border-box;
  width: 742px;
  height: 400px;
  border: 20px dashed yellowgreen;
  background-image: url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: lightSkyBlue;
  background-position: 20% 0px;
}
複製代碼

background-size

  background-size設置背景圖片的大小。圖片能夠保有原有的尺寸，或者拉伸到新的尺寸，或者保持其原有比例的同時縮放到元素的可用空間尺寸

屬性值：默認值/auto auto

  • 關鍵字
    • auto 以背景圖片的比例縮放背景圖片。
    • cover 縮放背景圖片以徹底覆蓋背景區，可能背景圖片部分看不見。和 contain 值相反，cover值儘量大的縮放背景圖像並保持圖像的寬高比例(圖像不會被壓扁)
    • contain (背景區容納背景圖片)縮放背景圖片以徹底裝入背景區，可能背景區部分空白。contain儘量的縮放背景並保持圖像的寬高比例(圖像不會被壓縮)

  • length 指定背景圖的寬高，不能爲負值
  • percentage 指定背景圖片相對背景區(同position的容器寬高)的百分比。背景區由background-origin設置

background-repeat

  background-repeat屬性定義背景圖像的重複方式。背景圖像能夠沿着水平軸，垂直軸，兩個軸重複，或者根本不重複。

屬性 定義
repeat 圖像會按需重複來覆蓋整個背景圖片所在的區域. 最後一個圖像會被裁剪, 若是它的大小不合適的話. repeat-x、repeat-y指定單方向重複
space 圖像會盡量得重複, 可是不會裁剪. 第一個和最後一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在圖像之間. background-position屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種狀況下裁剪會發生, 那就是圖像太大了以致於沒有足夠的空間來完整顯示一個圖像.
round 隨着容許的空間在尺寸上的增加, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加後, 全部的當前的圖像會被壓縮來騰出空間. 例如, 一個圖像原始大小是260px, 重複三次以後, 可能會被伸展到300px, 直到另外一個圖像被加進來. 這樣他們就可能被壓縮到225px.
no-repeat 圖像不會被重複(由於背景圖像所在的區域將可能沒有徹底被覆蓋). 那個沒有被重複的背景圖像的位置是由background-position屬性來決定.

space
round

background-attachment

  background-attachment屬性決定背景圖像的位置是在視口內固定，仍是隨着包含它的區塊滾動。

屬性值

  • fixed 表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動
  • local 表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 而且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。
  • scroll 示背景相對於元素自己固定，而不是隨着它的內容滾動（對元素邊框是有效的）。

background-clip

  background-clip設置元素的背景（背景圖片或顏色）是否延伸到邊框下面

取值：默認值/border-box

  • border-box 背景延伸至邊框外沿（可是在邊框下層）
  • padding-box 背景延伸至內邊距（padding）外沿。不會繪製到邊框處
  • content-box 背景被裁剪至內容區（content box）外沿
  • text 背景被裁剪成文字的前景色,屬性值爲text時 屬性應設置爲 -webkit-background-clip, 字體的顏色使用背景色 即color: transparent/-webkit-text-fill-color: transparent;
/* html */
<div class="border-image-color">
  text
</div>
/* css */
.border-image-color {
  box-sizing: border-box;
  width: 642px;
  height: 400px;
  font-size: 100px;
  line-height: 300px;
  text-align: center;
  border: 20px dashed yellowgreen;
  background-image: url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259);
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-background-clip: text;
  color: transparent;
}
複製代碼

clip:text

多重背景使用實例

工做場景： 官網主頁底部爲鋪滿不一樣的圖片，圖片之上再進行 基本的圖片文字排版

使用多重背景處理能夠避免冗餘空的html元素格外鋪圖片，避免僞元素和僞類去進行多餘的position定位（若背景圖片超過2個時，使用僞類和僞元素也比較困難）

多圖片爲底 

/* html */
<div class="border-image-color">
  <div class="section">
    我是排版一
  </div>
  <div class="section">
    我是排版二
  </div>
</div>

/* css */
.border-image-color {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 600px;
  height: 580px;
  border: 1px solid yellowgreen;
  text-align: center;
  background: url(https://user-gold-cdn.xitu.io/2020/3/20/170f5f4c42de2970?w=672&h=299&f=png&s=146779) 0px 0px,
              url(https://user-gold-cdn.xitu.io/2020/3/19/170f20b3c106f518?w=642&h=339&f=png&s=107259) 0px 250px;
  background-size: contain 250px;
  background-repeat: no-repeat;
}
.section {
  width: 400px;
  height: 200px;
  line-height: 200px;
  margin: 30px auto;
  text-align: center;
  background-color: rgba(0,0,0, .8);
  color: #fff;
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程