HTML + CSS CSS設置背景圖片后圖片沒有鋪滿屏幕等


在學習了一個星期的 HTML + CSS之后,發現還有一些東西需要去記憶,俗話說的好:
眼過千遍不如手過一遍,這就把需要記憶的東西記下來。

很多時候我們遇到的情況是:

設置背景圖片background-image:url(xxx.jpg);
如果背景圖片不平鋪就達不到全屏的效果,如果平鋪了之后效果就有些差強人意,這時候CSS這個屬性就派上用場了
background-size: cover;     //把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。

這個屬性有四個值:
length              設置背景圖像的高度和寬度,第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"
percentage          以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度,第二個值設置高度。如果只設置一個值,則第二個值會被設置為 "auto"。
cover               把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
contain             把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。
還有一些屬性和值是需要經常用但是不易記住的屬性
letter-spacing              //設置字符間距
text-decoration             //文本的裝飾  例如:下划線
text-shadow                 //文字陰影
text-indent                 //首行縮進
font-family                 //設置字體
font-style                  //斜體文本
font-weight                 //文本粗細
                
                列表樣式
list-style-type             //列表項目外觀
list-style-position         //列表符號的位置
list-style-image            //把圖像設置為列表項目的標記

                偽類選擇器
a:link                      //未訪問的鏈接
a:visited                   //已訪問的鏈接
a:hover                     //鼠標移動上去
a:active                    //鼠標點上去不放
:focus                      //選中那塊標簽的顏色
:first-child                //選擇元素第一個子元素
:last-child                 //選擇某個元素最后一個子元素
:nth-child(x)               //選擇某個元素的第x個元素

               偽元素選擇器
::before                    //在內容之前插入新內容
::after                     //在內容之后插入新內容
::first-line                //選擇指定選擇器首行
::first-letter              //選擇文本的第一個字符
        
        如果是div溢出需要用到overflow屬性,該屬性值如下:
visible                     //默認值,超出內容不會被修剪呈現在元素外
hidden                      //超出部分被隱藏
scroll                      //不論是否需要一直顯示滾動條
auto                        //按需顯示滾動條

邊框
outline:dashed;             //虛線輪廓
先寫到這里,如果有需要會繼續添加


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM