前端開發人員在構建網站時需要做的一個決定是引入圖片的方式。它可以是
標籤,或者是通過CSS background 屬性,還可以使用 SVG<image>。選擇正確的方式是很重要的,它對性能和可訪問性有很大的影響。/<image>在本文中,我們會學習引入圖像的各種方式,以及每種方式的優點和缺點,以及何時使用和為什麼使用它們。
HTML img 元素
最簡單的情況下,img元素必須包含src屬性:
<code>/<code>
設置寬度和高度屬性
在頁面加載時,它們會在頁面圖像加載時發生一些佈局變化。為了避免這種情況,我們可以為它設置width和height屬性:
<code>/<code>
雖然對某些人來說,這可能看起來太過簡單了,但它是有用的。我們用圖例的方式來理清這個概念:
我們看到到右側圖片即使尚未加載仍保留了空間?那是因為設置了寬度和高度。
通過 CSS 隱藏圖像
圖像可以用 CSS 隱藏。但是,它仍將加載在頁面中。因此,在執行此操作時請小心。如果一個圖像應該被隱藏,那麼它可能是出於裝飾的目的。
<code>img {
display: none;
}/<code>
同樣,上面的方法也不能阻止瀏覽器加載圖像,即使它在視覺上是隱藏的。原因是被認為是一個被替換的元素,所以我們無法控制它所加載的內容。
可訪問性問題
通過將alt屬性設置為有意義的描述,用來訪問 HTML 圖像,這對於屏幕閱讀器用戶非常有幫助。
然而,如果一個alt描述是不需要的,請不要刪除它,如果你這樣做,圖像src將被讀出,這對可訪問性非常不利。
不僅如此,如果圖像因為某種原因沒有加載,並且它有一個清晰的alt,它將作為一個回退顯示。同樣通過圖例來演示一下。
<code>
/<code>
當src無效,圖片沒有加載時。第一個沒有alt屬性,而第二個是空的alt屬性,下面是它們的視覺效果:
沒有alt的圖片仍然保留了它的空間,這很混亂,而且不利於訪問。而另一個alt為空的圖片,會摺疊起來看起來像一個小點,這裡因為它有邊框。
但是,當alt屬性有值,它看起來是這樣的:
這不是一個很好的反饋嗎?此外,當圖像源失敗時,可以向它們添加偽元素。
響應式圖像
的優點在於可以針對特定視口大小將其擴展為具有多個版本的照片。我們有兩種不同的方式來生成一組響應式圖像:
1.srcset屬性
<code>/<code>
這很簡單。對我來說,srcset可以根據屏幕寬度顯示多個圖像尺寸,這並不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像,而我們對此無能為力。
2.picture 標籤
另一種選擇是使用<picture>元素。我更喜歡這種方式,因為它更容易預測。/<picture>
事例源碼:https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100
調整圖像大小
對於,我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制的大小和定位,就像CSS背景圖像。
object-fit 值有:fill, contain, cover, none, scale-down。例如:
<code>img {
object-fit: cover;
object-position: 50% 50%;
}/<code>
CSS背景圖片
使用CSS背景顯示圖像時,它需要一個具有內容或特定寬度或高度的元素。通常,背景圖像的主要用途應該是用於裝飾目的。
何使用 CSS 背景圖片
首先,我們需要一個元素
<code>// htmlSome content
// css
.element {
background: url('cool.jpg');
}/<code>
多個背景
使用CSS背景圖片的好處是可以設置多個背景。考慮以下示例:
<code>.element {
background: url('cool-1.jpg'), url('cool-2.jpg');
}/<code>
隱藏圖像
我們可以在特定視口中隱藏和顯示圖像,如果未使用CSS設置圖片,則不會下載該圖片。與使用相比,這是一個額外的好處。
在上面的示例中,我們有一個背景圖像,僅在視口寬度大於700px時顯示。
可訪問性問題
如果使用不當,背景圖像可能會影響可訪問性。例如,將其用於文章主題,這對於文章至關重要。
非開發人員無法下載
普通人知道,如果要保存圖像,只需單擊鼠標左鍵,然後選擇保存即可。CSS 背景圖片並非如此,我們必須先檢查元素,然後在DevTools中的url中打開鏈接,然後才能下載隨CSS添加的圖像。
偽元素
可以將偽元素與CSS背景圖像一起使用,例如在圖像頂部顯示覆蓋圖。對於這是不可能的,直到我們為疊加層添加單獨的元素。
SVG Image
SVG被認為是一種圖像,它最大的功能是在不影響質量的情況下進行縮放。此外,使用SVG,我們可以嵌入JPG、PNG或SVG圖像。參見下面的 HTML:
你是否注意到了prepareAspectRatio?它的作用是可以讓圖像佔據SVG的整個寬度和高度,而不會被拉伸或壓縮。
當<image>寬度較大時,它將填充其父級(SVG)寬度而不會拉伸。/<image>
這非常類似於 CSS 中的object-fit: cover或background-size: cover。
可訪問性問題
關於SVG 的可訪問性,這使我想起了
<title>元素。例如,我們可以像下面這樣添加它:我們還可以使用<desc>元素/<desc>
非開發人員無法下載
必須先檢查元素並複製圖像的URL,然後才能下載嵌入SVG的圖像。但是,如果我們要防止用戶下載特定的圖像,這可能是一件好事。
用例
Hero Section
在構建hero section時,有時我們需要在標題和其他內容下方的圖像。參見下圖:
一些要求:
- 背景圖片能夠動態替換
- 圖片有一個覆蓋層,讓閱讀更容易
- 圖像有三種尺寸:小號、中號和大號。每一個都是針對一個特定的視口。
在開始解決方案之前,讓我們先問問自己這種背景的性質。這是一些入門問題:
- 為用戶保留這個圖像很重要嗎,還是可以跳過它?
- 我們是否需要在所有視口尺寸上使用它?
- 它是靜態的還是動態變化的?
解決方案1
通過使用多個CSS背景,我們可以將一個背景作為疊加層,將另一個背景作為實際圖像。請看下面的CSS:
<code>.hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.4),
rgba(0, 0, 0, 0.4)), var('landscape.jpg');
background-repeat: no-repeat;
background-size: 100%, cover;
}/<code>
雖然此解決方案有效,但可以使用 JavaScript 動態更改背景圖片。見下面:
<code> style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
//<code>
這裡添加了一個內聯樣式。雖然這是可行的,但它看起來很醜,而且不實用。
也許我們可以使用CSS變量?讓我們來探索一下。
<code>
//<code>
現在,我們可以輕鬆地更新--bg-url變量來動態更改背, 這比內聯的東西好一百萬倍。
小結:
- 這種方案只有在圖片不重要才適用
- 這種方案只適合一些靜態網站,因為沒有從後臺拉取圖片
事例源碼:https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522
解決方案2
該方案是可以使用一個 img 標籤:
<code>
Using Images in CSS
An article about which and when to use
//<code>
在CSS中,我們需要將圖片絕對定位在內容下方,並且還需要使用偽元素作為疊加層。
此解決方案的優點在於,可以輕鬆更改圖片的src屬性。同樣,如果圖像很重要,它將會更加有用。
另外,我喜歡使用HTML 的功能是能夠在未加載圖片的情況下添加回退。回退至少可以使內容保持可讀性。
<code>.hero img {
/* Other styles */
background: #2962ff;
}/<code>
在圖片源路徑不對時,背景顏色是一個代替方面。
事例源碼:https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100
網站 Logo
網站 Logo是很重要的,因為它可以將網站與其他網站區分開。要嵌入徽標,我們有一些選擇:
- img -> png,jpg, orsvg
- 內聯SVG
- 背景圖
接下來,我們來看看哪種方式更合適。
帶有很多細節的 Logo
當徽標具有許多細節或形狀時,將其用作嵌入式SVG可能沒有好處。我建議使用,圖像類型可以是png,jpg或svg。
需要動畫的簡單 Logo
我們有一個簡單的logo ,其中包含形狀和文字。懸停時,形狀和文本需要更改顏色。怎麼做?對我來說最好的解決方案是使用嵌入式SVG。
HTML
CSS
<code>.logo rect,
.logo text {
transition: 0.3s ease-out;
}
.logo:hover rect,
.logo:hover text {
fill: #4a7def;
}/<code>
事例源碼:https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100
響應 Logo
這讓我想起了Smashing Magazine的logo。我喜歡它從一個小圖標變成一個完整的徽標。參見下面的模型:
完美的解決方案是使用<picture>元素,可以在其中添 加logo 的兩個版本。如下所示:/<picture>
<code>
在CSS中,我們需要將視口的寬度更改為等於或大於1350px。
<code>.logo {
display: inline-block;
width: 45px;
}
@media (min-width: 1350px) {
.logo {
width: 180px;
}
}/<code>
這是簡單而直接的解決方案。
事例源碼:https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100
帶有漸變的Logo
當 logo 具有漸變時,從Illustrator或Sketch等設計應用程序將其導出的過程可能並不完美,有時會中斷。
使用SVG,我們可以輕鬆地為logo添加漸變。我添加了<lineargradient>並將其用作文本填充。/<lineargradient>
事例源碼:https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100
用戶頭像
對於用戶頭像,它們具有很多形狀,但最常見的是矩形或圓形。在此用例中,會介紹一個對你有用的重要技巧。
首先,讓我們看下面的模型。請注意,我們有一個完美的化身,並且100%清晰。
但是,當用戶上傳半白色頭像或非常淺的頭像時,這個設計就不太好了。
請注意,在上面的模型中,除非真正專注看,否則尚不清楚其中是否有一個圓圈。這是一個問題。為了解決這個問題,我們應該在頭像內添加邊框,以防圖像太亮看不清除。
我們有幾個選擇
- img元素
- img 和 div 元素
- div與CSS背景
- SVG image
哪一個最好?我們來探索探索。
使用 HTML ``
你可能首先想到的是添加一個邊框,對吧?讓我們來探討一下這個問題。
<code>.avatar {
border: 2px solid #f2f2f2;
}/<code>
我們的目標是使內部邊框與圖像融合在一起,這種不太實用。
使用 `` 和 `` 元素現在的問題是,要添加內部邊框,我們不能使用box-shadow,因為它無法在圖像上使用。解決方案用
包裹 頭像中,並添加專用於內部邊框的元素。HTML
<code>
/<code>
CSS
<code>.avatar-wrapper {
position: relative;
width: 150px;
height: 150px;
}
.avatar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
}/<code>
通過在
上使用透明度10%黑色的邊框,我們可以確保邊框與深色圖像融合,並且只有在圖像較亮的情況下才可見。參見下面的模型:事例地址:https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100
使用``與CSS背景如果我要使用
來顯示頭像,則可能表示該圖像具有裝飾性。我記得一個用例,它是分散在頁面中的隨機頭像。 HTML
<code>/<code>
CSS
<code>.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}/<code>
事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100
使用 SVG `<image>`/<image>
對我來說,這是最有趣的解決方案。我在檢查Facebook的新設計時注意到了它。
先對其進行剖析,它包含以下內容:
- 用於將圖像剪切為圓形(circle )的蒙版(mask )
- 對其應用了蒙版的組
- image本身帶有preserveAspectRatio =“ xMidYMid”
- 用於內邊界的圓
<code>circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}/<code>
事例地址:https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100
原文:https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
"
/<title>
現在的問題是,要添加內部邊框,我們不能使用box-shadow,因為它無法在圖像上使用。解決方案用
HTML
<code>/<code>
CSS
<code>.avatar-wrapper {
position: relative;
width: 150px;
height: 150px;
}
.avatar-border {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.1);
}/<code>
通過在
事例地址:https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100
使用``與CSS背景如果我要使用
來顯示頭像,則可能表示該圖像具有裝飾性。我記得一個用例,它是分散在頁面中的隨機頭像。 HTML
<code>/<code>
CSS
<code>.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}/<code>
事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100
使用 SVG `<image>`/<image>
對我來說,這是最有趣的解決方案。我在檢查Facebook的新設計時注意到了它。
先對其進行剖析,它包含以下內容:
- 用於將圖像剪切為圓形(circle )的蒙版(mask )
- 對其應用了蒙版的組
- image本身帶有preserveAspectRatio =“ xMidYMid”
- 用於內邊界的圓
<code>circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}/<code>
事例地址:https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100
原文:https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
"
如果我要使用
HTML
<code>/<code>
CSS
<code>.avatar {
background: var(--img-url) center/cover;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}/<code>
事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100
使用 SVG `<image>`/<image>
對我來說,這是最有趣的解決方案。我在檢查Facebook的新設計時注意到了它。
先對其進行剖析,它包含以下內容:
- 用於將圖像剪切為圓形(circle )的蒙版(mask )
- 對其應用了蒙版的組
- image本身帶有preserveAspectRatio =“ xMidYMid”
- 用於內邊界的圓
<code>circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}/<code>
事例地址:https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100
原文:https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
"閱讀更多 前端小智 的文章