背景顏色

圖片

插入圖片img

背景圖片

背景圖片
3. logo
4. 大圖
5. 裝飾性小圖

便于控制位置！

插入后會執行自動平鋪，這與插入圖片是不同的！

div{width: 600px;height: 300px;background-image: url(img/登錄用戶頭像.png); }

小結

盒子的第一件事，就是設置寬高和位置

背景圖片的平鋪可以設置（平鋪即repeat也就是重復），有4個屬性

背景顏色在圖片下顯示

背景位置 - PS對齊方式

比img設置位置要方便地多！

在一個盒子中，設置圖片的位置

• 水平：left、right、center
• 垂直：top、bottom、center

注意：
我們設置的
background-color是背景顏色
background-image是背景圖片
而后面的position和repeat是針對背景圖片操作的，控制其平鋪方式和位置

這些參數，控制的不是div盒子的位置，是控制盒子內的背景圖片的位置。

對于position

• 一個參數：給一個，另外一個默認居中，如果給center，就是中心位置
• 兩個參數：前后順序不分，針對水平/垂直兩個方向
  • 部分前后順序，因為可以通過left識別是水平，top是垂直方向

div{/* 以下是操作盒子本身 *//* 給盒子大小 */width: 100%;height: 100px;/* 以下是操作盒子里面 *//* 給背景顏色 */background-color: #D2691E;/* 給背景圖片 */background-image: url(img/登錄用戶頭像.png);background-repeat: no-repeat; /* 只顯示一個，不平鋪 *//* 給定圖片位置 *//* background-position: center bottom; */background-position: center;background-size: 50px;}

內外有別，注意是操作盒子，還是盒子里面的元素

廣義的盒子：塊級元素以及被賦予塊級行為的行內元素，都可以作為一個個的盒子。

實例1 針對小圖片

h3{/* box */width: 140px;height: 40px;/* text */font-size: 17px;line-height: 40px;font-weight: 400;text-indent: 1.5em;/* background */background-color: wheat;background-image: url(img/登錄用戶頭像.png);background-repeat: no-repeat;background-size: 19px;background-position: left; }

重要的點：

知道自己在操作哪個元素，知道在哪個盒子里面操作

實例2 針對大圖片 頁面可能放不開內種

核心要點：自適應控制

div{width: 100%;height: 1100px;/* margin: 0; */background-image: url(img/wzry.jpg);background-repeat: no-repeat;background-position: top; }

控制超大圖片，在任意瀏覽器都要，居中顯示。

精確單位

對于bg-position我們需要統一下

• 參數有兩個，x坐標 y坐標
• 參數可以是
  • 10px
  • left right top center
• 避免扯犢子的參數：20px left兩個都設置x坐標……

不同的css參數，具備指定功能

例如font-size指定的就是文本，而background指定的就是背景，在同一個選擇器可以一起寫。

背景固定

背景色半透明

也允許.3。

僅影響盒子的背景色透明度，盒子內容不影響。

背景小結

注意，背景主要是兩個方面

背景色

顏色

不透明度

背景圖片：大圖片，小圖片，控制位置方便

其他各個屬性，控制的都是背景圖片，也就是塊內的背景圖片，不能控制文字什么的。

只要能有塊行為，就可以使用這些，比如a標簽轉換為行內塊元素，以及p標簽……不止是div！

總結

以上是生活随笔為你收集整理的html css 学习笔记（1）背景相关的全部內容，希望文章能夠幫你解決所遇到的問題。

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