|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 對于一個網頁來說,有一張好看又清晰的背景圖片是非常吸引人的,但是并不是每張圖片都是有相同的大小,所以就需要曬西安圖片的自適應,那么,css怎么讓圖片自適應呢?本篇文章將來介紹關于css圖片自適應大小的方法。我們下面就來直接看一個例子: <div class="wrapper">
<!--背景圖片-->
<div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
<!--其他代碼 ... --></div>#web_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}對于上述這個例子,我們來分析一下這個css代碼怎么讓圖片自適應大小。 首先我們來看看這三句在css圖片自適應大小中有什么作用: position:fixed; top: 0; left: 0; 說明:這三句是讓整個div容器固定在屏幕的最上方和最左方。 其次我們來看看下面這幾句在css圖片自適應大小中的作用: width:100%; height:100%; min-width: 1000px; 說明:這幾句讓整個div跟屏幕實現一模一樣的大小,從而達到全屏效果,而min-width是為了實現讓屏幕寬度在1000px以內時,div的大小保持不變,也就是說在這種情況下,縮放屏幕寬度時,圖片不要縮放(只有在1000px以內才有效)。 接下來我們來看一看這個代碼: z-index:-10; 說明:這個是讓整個div在HTML頁面中各個層級的下方,正常情況下,第一個創建的層級z-index的值是0,所以如果我們這里寫成-1也可以實現,不過這里寫-10是確保整個div在最下面,因為如果頁面中層級太多了,有的時候用-1不一定在最下面,但如果寫成-100這樣大數字的也沒有什么意義。用index:-10 以此能達到看上去像背景圖片,其實是一個最普通的div,只是層級關系變了,才讓人看上去看是背景圖片。 background-repeat: no-repeat; 注意:這個是背景不要重復。 background-size: cover; -webkit-background-size: cover; -o-background-size: cover; 說明:上面三句是一個意思,就是讓圖片隨屏幕大小同步縮放,但是有部分可能會被裁切,不過不至于會露白,下面兩句是為chrome和opera瀏覽器作兼容。 最后來看一看最后一句: background-position: center 0; 說明:上面這句的意思就是圖片的位置,居中,靠左對齊。 以上這篇文章到這里就結束了,如果你想對上述css代碼中所提到的各個屬性有更多的了解可以參考css手冊。 相關推薦: 以上就是css怎么讓圖片自適應?css圖片自適應大小的方法介紹的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!