css中背景圖和小圖標(biāo)定位和優(yōu)化

時間：2023-09-04 06:42:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-04 06:42:01 來源：網(wǎng)站運(yùn)營

css中背景圖和小圖標(biāo)定位和優(yōu)化：

前言

學(xué)習(xí)的過程是應(yīng)該不斷探索和總結(jié)的。以我為例，我認(rèn)為我是一個相對愚笨，有沒有很強(qiáng)的自制力，學(xué)習(xí)也愛耍些”小聰明“，總感覺自己懂了，但是每次一到自己進(jìn)行書寫的時候，又總是模模糊糊。我做了以下幾件事

1. 我強(qiáng)迫自己慢下來，不必追求進(jìn)度，不去想自己的未來、自己能不能找到工作（當(dāng)你處于憂慮之中，就會無形的耗費(fèi)自己的精力)。
2. 強(qiáng)迫自己寫博客文章，遇到不懂的就及時總結(jié)和梳理自己的疑惑。
3. 要有個大致的方向，避免一個知識點鉆牛角尖到底，忽略了自己本來的方向。

所以這些文章都是我自己的總結(jié)和疑惑，我希望能夠擁有一個博客網(wǎng)站，發(fā)些文章，有人瀏覽。繼續(xù)努力！

本篇文章就是針對背景圖的定位，和一些小圖標(biāo)的定位問題，進(jìn)行的總結(jié)。可能不夠全面和專業(yè)。

背景圖background屬性

使用背景圖，來進(jìn)行頁面的設(shè)計，主要用到background屬性。我們先把一些簡單的寫出來，之后再探討難一點的。

background-clip:設(shè)置元素的背景是否延伸到邊框下面。屬性有： border-box padding-box``content-box

background-color設(shè)置背景色。

background-imgage設(shè)置背景圖，通過url("")進(jìn)行設(shè)置。

background-attachment決定背景是在視口中固定的還是隨包含它的區(qū)塊滾動的。

fixed此關(guān)鍵字表示背景相對于視口固定。

scroll背景相對于元素本身固定，而不是隨著他的內(nèi)容滾動。如果父元素設(shè)置為overflow: auto;或scroll出現(xiàn)滾動條的時候，那么負(fù)負(fù)得正，背景圖固定。

local表示背景相對于元素的內(nèi)容固定。有scroll背景相對于元素本身固定，如果父元素設(shè)置為overflow: auto;或scroll出現(xiàn)滾動條的時候，背景圖隨元素運(yùn)動。

下面一些比較復(fù)雜的屬性。

background-position

一圖以避之，這個屬性可以是具體數(shù)值，也可以是百分比也可以是left top bottom right center。




百分比布局則是，父元素的百分比和子元素的百分比共同決定的，也就是說使用

background-position: 100% 100%;使得元素定位到了父元素的右下角。

background-size

設(shè)置背景圖片的大小，可以保持原有尺寸，或拉伸到新的尺寸。或者再保持原有比例進(jìn)行縮放。

屬性值：

數(shù)值指定背景圖片大小。

百分比指定背景圖片相對背景區(qū)的百分比。

auto以背景圖片的比例縮放背景圖片。

cover縮放背景圖片覆蓋背景區(qū)。（不會被壓扁）

contain縮放背景圖片完全裝入背景區(qū)，可能背景區(qū)部分空白。

/* 關(guān)鍵字 */background-size: coverbackground-size: contain?/* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto */background-size: 50%background-size: 3embackground-size: 12pxbackground-size: auto?/* 兩個值 *//* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto

三、背景圖的實踐

1. 百分百充滿容器

如何將網(wǎng)頁的背景設(shè)置為一張圖片（100%充滿背景，不重復(fù)）？

• 不考慮拉伸的情況?？梢栽O(shè)置為background-size: 100% 100%;
• 保持原比例，設(shè)置為：background-size: cover;

2. 設(shè)置遮罩

有時，設(shè)計時圖片上面會有一些遮罩，以實現(xiàn)交互效果。

• 如果沒有交互效果，可以在原設(shè)計圖上面直接將遮罩和背景一起合成一張圖片，直接應(yīng)用這張圖片就好了。
• 由于background-color和background-image可以同時設(shè)置，所以可以用background-color進(jìn)行設(shè)置遮罩。設(shè)置透明度使用opacity屬性（0-1.0)。
  注意：opacity屬性是設(shè)置元素的不透明度，所以對于未設(shè)置的元素，是不會影響其透明度的。
  所以我們需要為遮罩加一個div標(biāo)簽。如下：
  <div id="header">
  <div class="header-mask">
  <p>這是內(nèi)部的元素，沒有被影響。</p>
  </div>
  </div>
  #header {
  height: 1500px;
  background: url("images/Background.png") no-repeat;
  background-size: cover;
  ?
  }
  #header .header-mask {
  widht: 100%;
  height: 100%;
  background-color: yellow;
  opacity: 0.25;
  }
  效果如圖：
  

• 也可以通過rgba()進(jìn)行遮罩的設(shè)置，如rgb(0,0,0,.4)注意，這種方法還是需要加一個標(biāo)簽的和上面類似。因為如果在背景圖上面再加顏色會顯示不出來，被擋住了。
• 如果為了更加符合語義化，可以將上面后加的標(biāo)簽去除，使用after偽元素。

3. 設(shè)置圖標(biāo)

h1 { padding-left: 30px; background: url(icon.png) no-repeat left center;}