css樣式背景圖片設置縮放


一、背景顏色圖片平鋪

background-color   背景顏色
background-image   背景圖片地址
background-repeat  是否平鋪 默認是平鋪
background-position 背景位置  (模式是左上角 0 0) 方位沒有順序
    1.(length 長度 )寫精確單位 或者百分比 第一個值是x坐標 第二個一定是y
    2.(position: top|center | bottom | left | right  方位坐標)
      如果方位名詞只寫一個  另外一個默認為center
    3.混搭也ok
background-attachment 設置背景圖是否固定 默認是scroll, fixed是固定

合寫: background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
background: #000 url(image/timg.jpg) no-repeat center -25px fixed;

 

二、背景縮放

景縮放
background-size 100px;  等比例縮放  盡量只改一個值 否則圖片會是真扭曲也可以寫百分比
常用的兩個參數:
cover :會自動調整縮放比例,保證圖片始終填充滿背景區域,如有溢出自動隱藏
contain:圖片等比例縮放,如果圖片的寬度或者高度有一個和盒子一樣大了就不在縮放,不會有缺失的部分,保證了圖片的完整性。

多背景圖片設置

    width: 800px;    
    height: 500px;    
    background: url(image/harry.jpg) no-repeat left top,
    url(image/denglun.jpg) no-repeat right bottom purple;

以逗號分隔可以設置多背景,課用於自適應布局,注意事項:
1. 一個元素可以設置多重背景圖片
2. 每組屬性間使用逗號分隔
3. 如果設置了多重背景之間存在交集,前面的圖片會覆蓋在后面圖片之上
4. 為了避免背景色將圖片覆蓋,背景色通常定義在最后一組上

 

三、小復習 shadow文字陰影和文本修飾

凹凸文字效果,shadow實現
div:first-child {
            text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
}
div:last-child {
    text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}

文本修飾
text-decoration: 
    none 默認 定義標准的文本 取消文本裝飾
    underline 定義文本下的一條線
    overline 定義文本上的一條線
    line-through 定義穿過文本下的一條線

設置文字水平居中小tip
設置文字的行高等於盒子的高度
line-height: 50px;

 


免責聲明!

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



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