[ CSS 04 ] 圖片設定相關


Posted by tzutzu858 on 2021-05-13

放圖片有兩種方式

  1. HTML <img> 這個 tag
  2. CSS 的 background-image

當圖片要有超連結,或是有點圖放大的功能時,建議先用 HTML的 <img>


HTML <img>

使用 <img> 放圖片的檔案路徑或 URL 用 src

<img src="png/1.png">

<img src="https://tzu/photo/1">

透過 object-fitobject-position 這兩個屬性,可以控制置換元素的內容填入的位置及大小

object-fit

Value Description
fill 預設值,預設會強制變形至 css 所定義的元素寬高,不管原檔比例
contain 增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高
cover 填滿元素的寬度及高度(維持原比例),通常會剪掉部分的物件
none 不做任何大小及比例調整
scale-down 將會選擇設為 none 或 container 兩者間較小的那個物件

object-position

object-position: 50% 50%;
object-position: right top;
object-position: 250px 125px;

透過這兩個屬性,我們可以控制置換元素的內容填入的位置及大小。

注 : IE、edge 並不支援這兩個屬性



CSS 的 background-image

使用 CSS 的 background-image 放圖片的檔案路徑或 URL 用 url

.photo{
    background-image: url('png/1.png');
}

background-attachment

設定背景圖片的位置是否要固定在 viewport(視圖)上,還是背景圖片會隨著它的 containing block(外層容器)一起滾動。

  1. scroll : 預設值,捲動網頁,背景圖跟著滾動,捲動放背景圖的外層容器,背景圖不動
  2. fixed : 全都固定住,背景圖在滾動網頁或外層容器時,都不會跟著移動
  3. local : 全都一起移動,背景圖在滾動網頁或外層容器時,都會跟著移動

background-origin

決定背景圖片的起始位置
當使用 background-attachment 為 fixed 時,該屬性將忽略不起作用

  1. border-box : 背景圖片的擺放以 border 區域為參考
  2. padding-box : 背景圖片的擺放以 padding 區域為參考
  3. content-box : 背景圖片的擺放以內容區域為參考

background-position

  • top
  • left
  • center
  • 5% 75%;
  • bottom 50px right 100px;
    也可以設定多張圖片的位置
    .photo {
    background-image:url("png/1.png"),url("png/1.png");
    background-position: 0px 0px,
                         right 3em bottom 2em;
    }
    

background-repeat

定義背景圖像的重複方式

Value Description
repeat default,垂直和水平重複背景圖像,圖片會被裁切
repeat-x 圖片僅水平重複
repeat-y 圖片僅垂直重複
no-repeat 不重複。圖片只會顯示一次
space 和 repeat 一樣都是垂直和水平重複,差別在於第一個和最後一個圖像固定在元素的任一側,並且空隙在圖像之間均勻分佈
round 重複並壓縮或拉伸背景圖像以填充空間(無間隙)

可以使用雙 value 語法 ,例如 background-repeat: space repeat;


background-size

設定背景圖片的尺寸

Value Description
auto 預設樣式,不改變原圖尺寸。
contain 在其容器內縮放圖片,(不裁剪或拉伸圖像)。如果容器大於圖像,除非設定 background-repeat: no-repeat;,否則圖片會重複且裁切。
cover 盡可能縮放圖像來填充容器,圖片比例不會變,但會裁剪圖像使容器沒有空白空間。
50% 背景圖片的寬度為容器的 50% ,height 的值沒有給,則預設為 auto
length 給圖片的 width 和 height,如果只輸入一個值,則 width 和 height 相同

alt

當圖片來源損壞無法顯示時, 網頁會顯示該替代文字,使用替代文字也可以增加 SEO 的排名


background-blend-mode

濾鏡效果,除了固定的預設值,也可以使用兩張圖片來混合

.item {
    width: 300px;
    height: 300px;
    background: url('image1.png'),url('image2.png');
    background-blend-mode: screen;
}









Related Posts

[Note] 待整理的好文

[Note] 待整理的好文

Vite系列#使用 Create Vue 版本進行創建

Vite系列#使用 Create Vue 版本進行創建

陪你讀論文 - 3D Multi-Object Tracking: A Baseline and New Evaluation Metrics (IROS 2020)

陪你讀論文 - 3D Multi-Object Tracking: A Baseline and New Evaluation Metrics (IROS 2020)


Comments