一、css背景圖片

1、概述

????背景是css中一個重要的的部分，也是需要知道的css的基礎知識之一。這里主要介紹有關背景圖片的5種常見屬性，分別是：

（1）、

background-color: rgb(0, 0, 255);

background-color: #0000ff;

background-color 也可被設置為透明（transparent），這會使得其下的元素可見。

3、背景圖(background-image)

background-image 屬性允許指定一個圖片展示在背景中。可以和 background-color 連用，因此如果圖片不重復地話，圖片覆蓋不到的地方都會被背景色填充。代碼如下：

background-image: url(image.jpg);

4、背景平鋪(background-repeat)

???設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。這也許是你需要的，但是有時會希望圖片只出現一次，或者只在一個方向平鋪。以下為可能的設置值和結果：

background-repeat: repeat; （即默認方式，完全平鋪背景；?）

background-repeat: no-repeat; （不平鋪）

background-repeat: repeat-x; （水平方向平鋪）

background-repeat: repeat-y; （垂直方向平鋪）

5、背景定位(background-position)

background-position 屬性用來控制背景圖片在元素中的位置。實際上指定的是圖片左上角相對于元素左上角的位置。

background-position可以用數字或百分比來表示：
第一個數字表示 x 軸(水平)位置，第二個是 y 軸(垂直) 位置。

background-position: 75px 0;

background-position: 100% 50%;

background-position也可以用關鍵詞來表示：

x 軸上：* left

??* center

??* right

y 軸上：* top

????* center

????* bottom

順序方面和使用像素值時的順序幾乎一樣，首先是 x 軸，其次是 y 軸，像這

6、背景附著

background-attachment 屬性決定用戶滾動頁面時圖片的狀態。三個可用屬性為 scroll(滾動)，fixed(固定) 和 inherit(繼承)。inherit 單純地指定元素繼承他的父元素的 background-attachment 屬性。

如果設置 background-attachment: scroll，就設置了當元素滾動時，元素背景也必需隨著滾動。簡而言之，背景是緊貼元素的。這是 background-attachment 默認值。

用一個例子來更清楚地描述下：

background-image: url(test-image.jpg);?

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll;

?

當向下滾動頁面時，背景向上滾動直至消失。

但是當設置 background-attachment 為 fixed 時，當頁面向下滾動時，背景要待在它原來的位置(相對于瀏覽器來說)。也就是不隨元素滾動。

七、背景的簡寫屬性

可以把背景的各個屬性合為一行，而不用每次都單獨把他們寫出來。格式如下：

background: <color> <image> <position> <attachment> <repeat>

例如，下面的聲明

background-color: transparent;

background-image: url(image.jpg);

background-position: 50% 0 ;

background-attachment: scroll;

background-repeat: repeat-y;

可以合為單獨一行：

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

八、CSS3 中的背景

CSS3 中的背景有較多改進。最顯著的是多背景圖片的選項，同時也增加了4個新屬性。

1、多背景

CSS3 中，可以對一個元素應用一個或多個圖片作為背景。代碼和 css2 中的一樣，只需要用逗號來區別各個圖片。第一個聲明的圖片定位在元素頂部，其它的圖片按序在其下排列，例如：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

2、背景修剪(background-clip)

background-clip 屬性用來增強背景顯示位置的控制能力。可能的值為：

* background-clip: border-box;
背景顯示在邊框內。
* background-clip: padding-box;
背景顯示在內補白(padding)內，而不是邊框內。
* background-clip: content-box;
只在內容內顯示背景，而不是內補白(padding)和邊框內。
* background-clip: no-clip;
默認值，和 border-box 一樣。

3、背景原點(background-origin)

這個屬性和 background-position 結合起來使用。可以從邊框，內補白或者內容盒子開始計算 background-position (類似于 background-clip)。

* background-origin: border-box;
以邊框為原點開始計算 background-position.
* background-origin: padding-box;
以內補白為原點開始計算 background-position
* background-origin: content-box;
以內容盒子為原點開始計算 background-position
4、新屬性： 背景尺寸(background-size)

background-size 用來調整背景圖的大小。有好幾個可能值：

* background-size: contain;
縮小圖片來適應元素的尺寸(保持像素的長寬比)
* background-size: cover;
擴展圖片來填滿元素(保持像素的長寬比)
* background-size: 100px 100px;
調整圖片到指定大小
* background-size: 50% 100%;
調整圖片到指定大小。百分比是相對于包含元素的尺寸的。

總結

??以上便是在工作中常用的有關背景圖片的屬性：背景顏色background-color、背景圖片background-image、位置background-position、平鋪方式background-repeat、是否滾動background-attachment以及css3中新增的有關背景圖片大小background-size等屬性，這些屬性通常在一起采用簡寫的方式使用，有關背景圖片的其它屬性不在一一列舉。

background屬性的值的書寫順序官方并沒有強制標準的。?
為了可讀性，定一個CSS書寫規范，規則：background的值的順序是background-color，background-image，background-repeat，background-attachment，background-position。

二、圓角border-radius

border-radius：10px ?10px ?10px ?10px ?

左上 ?右上 ?右下 ?左下 （順時針）

border-radius：10px ?10px ??左上右下 ??右上左下

border-radius：10px ?四角

(注意：當圓角的值大于元素的寬就會變成圓形)

三、盒子陰影box-shadow

box-shadow：0?0?1px?#000?inset;

水平 ?垂直 ??模糊 ?顏色 ；

?

???[1] inset代表框內陰影,不加inset代表框外陰影

???[2]第1個值為0時，代表左右邊框陰影為1px范圍
??????第1個值為正整數 代表左邊框陰影
??????第1個值為負整數 代表右邊框陰影
??????同理
??????第2個值為0 代表上下邊框陰影
??????第2個值為正整數 代表1px陰影距離上邊框多少
??????第1個值為負整數 代表下邊框陰影設置

(注意：box-shadow：0 0 10px 顏色 ；四周發光；)

?

四、 float浮動問題

[1] 元素的高度是由他的子元素來決定的，當一個元素的子元素都浮動后該元素就沒有高度了

[2] 當一個元素float 以后它的父親，和兄弟認為它不存了

????它不再參與父親高度的計算

????兄弟會占據他原來的位置

[3] 它的寬度就不再獨自占一行而是由他的文字（內容的寬度）來決定。

[4] 不管怎么float 它都不會超過父親的范圍。

[5] 誰先float 誰優先靠在父親元素的左側或者右側（html標簽在前面，就是先）

[6]只要浮動元素前面有 內容無論行內還是塊級浮動元素都會另起一行；

[7]行內元素設置float 以后會轉換為塊級別元素

[8]浮動元素都是從父親的左側或者右側開始水平排列 ，如果父親元素寬度容不下該元素，該元素就會另起一行

[9] clear:left;指該元素左邊不準出現浮動元素

????clear：right 右邊不準出現浮動元素

????clear:both 該元素左右都不準出現浮動元素（無論怎樣單獨占一行）

[10]只有父親元素最后一個元素沒有浮動 ，父親元素的背景就會包括所有的子元素

解決子元素都浮動后父親元素沒有高度的辦法

給該父親元素添加 clearfix class名

.clearfix:after{ content:""; display:block; clear:both; height:0; visiblity:hidden;}

清除浮動的幾種方法：

下面總結8種清除浮動的方法（測試已通過 ie chrome firefox opera，后面三種方法只做了解就可以了）：
1，父級div定義 height

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
2，結尾處加空div標簽 clear:both

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3、父級div定義 偽類:after 和 zoom

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
4，父級div定義 overflow:hidden

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
5，父級div定義 overflow:auto

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

6，父級div 也一起浮動

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解決代碼*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：所有代碼一起浮動，就變成了一個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作了解。
7，父級div定義 display:table

代碼如下:

<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題。
建議：不推薦使用，只作了解。

?

8，結尾處加 br標簽 clear:both

代碼如下:
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">

原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標簽 clear:both
建議：不推薦使用，只作了解。

?

轉載于:https://www.cnblogs.com/xiaoxiao1126/p/6096822.html

總結

以上是生活随笔為你收集整理的css背景图片、圆角、盒子阴影、浮动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。