国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

作者：ahmad shadeed
譯者：前端小智 來源：developers

本文 GitHub github.com/qq449245884… 上已經(jīng)收錄，更多往期高贊文章的分類，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點復(fù)習(xí)，希望我們一起有點東西。

前端開發(fā)人員在構(gòu)建網(wǎng)站時需要做的一個決定是引入圖片的方式。它可以是<img>標簽，或者是通過CSS background 屬性，還可以使用 SVG <image>。選擇正確的方式是很重要的，它對性能和可訪問性有很大的影響。

在本文中，我們會學(xué)習(xí)引入圖像的各種方式，以及每種方式的優(yōu)點和缺點，以及何時使用和為什么使用它們。

HTML <img> 元素

最簡單的情況下，img元素必須包含src屬性:

<img src="cool.jpg" alt="">復(fù)制代碼

設(shè)置寬度和高度屬性

在頁面加載時，它們會在頁面圖像加載時發(fā)生一些布局變化。為了避免這種情況，我們可以為它設(shè)置width和height屬性:

<img src="cool.jpg" width="200" height="100" alt="">復(fù)制代碼

雖然對某些人來說，這可能看起來太過簡單了，但它是有用的。我們用圖例的方式來理清這個概念：

我們看到到右側(cè)圖片即使尚未加載仍保留了空間？ 那是因為設(shè)置了寬度和高度。

通過 CSS 隱藏圖像

圖像可以用 CSS 隱藏。 但是，它仍將加載在頁面中。 因此，在執(zhí)行此操作時請小心。如果一個圖像應(yīng)該被隱藏，那么它可能是出于裝飾的目的。

img {    display: none;}復(fù)制代碼

同樣，上面的方法也不能阻止瀏覽器加載圖像，即使它在視覺上是隱藏的。原因是<img>被認為是一個被替換的元素，所以我們無法控制它所加載的內(nèi)容。

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

可訪問性問題

通過將alt屬性設(shè)置為有意義的描述，用來訪問 HTML 圖像，這對于屏幕閱讀器用戶非常有幫助。

然而，如果一個alt描述是不需要的，請不要刪除它，如果你這樣做，圖像src將被讀出,這對可訪問性非常不利。

不僅如此，如果圖像因為某種原因沒有加載，并且它有一個清晰的alt，它將作為一個回退顯示。同樣通過圖例來演示一下。

假設(shè)我們有以下圖片：

<img class="food-thumb" width="300" height="200" src="cheescake.jpg"><img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">復(fù)制代碼

當(dāng)src無效，圖片沒有加載時。第一個沒有alt屬性，而第二個是空的alt屬性，下面是它們的視覺效果：

沒有alt的圖片仍然保留了它的空間，這很混亂，而且不利于訪問。而另一個alt為空的圖片，會折疊起來看起來像一個小點，這里因為它有邊框。

但是，當(dāng)alt屬性有值，它看起來是這樣的：

這不是一個很好的反饋嗎?此外，當(dāng)圖像源失敗時，可以向它們添加偽元素。

響應(yīng)式圖像

<img>的優(yōu)點在于可以針對特定視口大小將其擴展為具有多個版本的照片。 我們有兩種不同的方式來生成一組響應(yīng)式圖像：

1.srcset屬性

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">復(fù)制代碼

這很簡單。 對我來說，srcset可以根據(jù)屏幕寬度顯示多個圖像尺寸，這并不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像，而我們對此無能為力。

2.picture 標簽

<picture>  <source srcset="large.jpg" media="(min-width: 800px)" />  <source srcset="medium.jpg" media="(min-width: 500px)" />  <img src="small.jpg" /></picture>復(fù)制代碼

另一種選擇是使用<picture>元素。 我更喜歡這種方式，因為它更容易預(yù)測。

事例源碼：codepen.io/shadeed/pen…

調(diào)整圖像大小

對于<img>，我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制<img>的大小和定位，就像CSS背景圖像。

object-fit 值有：fill, contain, cover, none, scale-down。例如：

img {    object-fit: cover;    object-position: 50% 50%;}復(fù)制代碼

CSS背景圖片

使用CSS背景顯示圖像時，它需要一個具有內(nèi)容或特定寬度或高度的元素。 通常，背景圖像的主要用途應(yīng)該是用于裝飾目的。

何使用 CSS 背景圖片

首先，我們需要一個元素

// html<div class="element">Some content</div>// css.element {    background: url('cool.jpg');}復(fù)制代碼

多個背景

使用CSS背景圖片的好處是可以設(shè)置多個背景。考慮以下示例：

.element {    background: url('cool-1.jpg'), url('cool-2.jpg');}復(fù)制代碼

隱藏圖像

我們可以在特定視口中隱藏和顯示圖像，如果未使用CSS設(shè)置圖片，則不會下載該圖片。 與使用<img>相比，這是一個額外的好處。

在上面的示例中，我們有一個背景圖像，僅在視口寬度大于700px時顯示。

可訪問性問題

如果使用不當(dāng)，背景圖像可能會影響可訪問性。 例如，將其用于文章主題，這對于文章至關(guān)重要。

####?非開發(fā)人員無法下載

普通人知道，如果要保存圖像，只需單擊鼠標左鍵，然后選擇保存即可。 CSS?背景圖片并非如此，我們必須先檢查元素，然后在DevTools中的url中打開鏈接，然后才能下載隨CSS添加的圖像。

偽元素

可以將偽元素與CSS背景圖像一起使用，例如在圖像頂部顯示覆蓋圖。 對于<img>這是不可能的，直到我們?yōu)榀B加層添加單獨的元素。

SVG <Image>

SVG被認為是一種圖像，它最大的功能是在不影響質(zhì)量的情況下進行縮放。此外，使用SVG，我們可以嵌入JPG、PNG或SVG圖像。參見下面的 HTML:

<svg width="200" height="200">  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" /></svg>復(fù)制代碼

你是否注意到了prepareAspectRatio？ 它的作用是可以讓圖像占據(jù)SVG的整個寬度和高度，而不會被拉伸或壓縮。

當(dāng)<image>寬度較大時，它將填充其父級（SVG）寬度而不會拉伸。

這非常類似于 CSS 中的object-fit: cover或background-size: cover。

可訪問性問題

關(guān)于SVG 的可訪問性，這使我想起了<title>元素。 例如，我們可以像下面這樣添加它：

<svg width="200" height="200">   <title>A photo of blueberry Cheescake</title>   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" /></svg>復(fù)制代碼

我們還可以使用<desc>元素

<svg width="200" height="200">   <title>A photo of blueberry Cheescake</title>   <desc>A meaningful description about the image</desc>   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" /></svg>復(fù)制代碼

非開發(fā)人員無法下載

必須先檢查元素并復(fù)制圖像的URL，然后才能下載嵌入SVG的圖像。 但是，如果我們要防止用戶下載特定的圖像，這可能是一件好事。

用例

Hero Section

在構(gòu)建hero section時，有時我們需要在標題和其他內(nèi)容下方的圖像。 參見下圖：

一些要求：

• 背景圖片能夠動態(tài)替換

• 圖片有一個覆蓋層，讓閱讀更容易

• 圖像有三種尺寸:小號、中號和大號。每一個都是針對一個特定的視口。

在開始解決方案之前，讓我們先問問自己這種背景的性質(zhì)。 這是一些入門問題：

1. 為用戶保留這個圖像很重要嗎，還是可以跳過它？

2. 我們是否需要在所有視口尺寸上使用它？

3. 它是靜態(tài)的還是動態(tài)變化的？

解決方案1

通過使用多個CSS背景，我們可以將一個背景作為疊加層，將另一個背景作為實際圖像。 請看下面的CSS：

.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;}復(fù)制代碼

雖然此解決方案有效，但可以使用 JavaScript 動態(tài)更改背景圖片。 見下面：

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">  <!-- Hero content --></section>復(fù)制代碼

這里添加了一個內(nèi)聯(lián)樣式。雖然這是可行的，但它看起來很丑，而且不實用。

也許我們可以使用CSS變量？ 讓我們來探索一下。

<section class="hero" style="--bg-url: url('landscape.jpg')">  <!-- Hero content --></section>復(fù)制代碼

現(xiàn)在，我們可以輕松地更新--bg-url變量來動態(tài)更改背， 這比內(nèi)聯(lián)的東西好一百萬倍。

小結(jié)：

1. 這種方案只有在圖片不重要才適用

2. 這種方案只適合一些靜態(tài)網(wǎng)站，因為沒有從后臺拉取圖片

事例源碼：codepen.io/shadeed/pen…

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

解決方案2

該方案是可以使用一個 img 標簽：

<section class="hero">  <h2 class="hero__title">Using Images in CSS</h2>  <p class="hero__desc">An article about which and when to use</p>  <img src="landscape.jpg" alt=""></section>復(fù)制代碼

在CSS中，我們需要將圖片絕對定位在內(nèi)容下方，并且還需要使用偽元素作為疊加層。

.hero {    position: relative;}.hero img {    position: absolute;    left: 0;    top: 0;    z-index: -1;    width: 100%;    height: 100%;    object-fit: cover;}.hero:after {    content: "";    position: absolute;    left: 0;    top: 0;    z-index: -1;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.4);}復(fù)制代碼

此解決方案的優(yōu)點在于，可以輕松更改圖片的src屬性。 同樣，如果圖像很重要，它將會更加有用。

另外，我喜歡使用HTML <img>的功能是能夠在未加載圖片的情況下添加回退。 回退至少可以使內(nèi)容保持可讀性。

.hero img {    /* Other styles */    background: #2962ff;  }復(fù)制代碼

在圖片源路徑不對時，背景顏色是一個代替方面。

事例源碼：codepen.io/shadeed/pen…

網(wǎng)站 Logo

網(wǎng)站 Logo是很重要的，因為它可以將網(wǎng)站與其他網(wǎng)站區(qū)分開。 要嵌入徽標，我們有一些選擇：

*<img> -> png,jpg, orsvg

• 內(nèi)聯(lián)SVG

• 背景圖

接下來，我們來看看哪種方式更合適。

帶有很多細節(jié)的 Logo

當(dāng)徽標具有許多細節(jié)或形狀時，將其用作嵌入式SVG可能沒有好處。 我建議使用<img>，圖像類型可以是png，jpg或svg。

需要動畫的簡單 Logo

我們有一個簡單的logo ，其中包含形狀和文字。 懸停時，形狀和文本需要更改顏色。 怎么做？ 對我來說最好的解決方案是使用嵌入式SVG。

HTML

<a href="#">    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">          <tspan x="63.923" y="36.923">Rect</tspan>        </text>      </g>    </svg></a>復(fù)制代碼

CSS

.logo rect,.logo text {  transition: 0.3s ease-out;}.logo:hover rect,.logo:hover text {  fill: #4a7def;}復(fù)制代碼

事例源碼：codepen.io/shadeed/pen…

響應(yīng) Logo

這讓我想起了Smashing Magazine的logo。 我喜歡它從一個小圖標變成一個完整的徽標。 參見下面的模型：

完美的解決方案是使用<picture>元素，可以在其中添 加logo 的兩個版本。 如下所示：

<a class="logo" href="/">    <picture>      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>  </a>復(fù)制代碼

在CSS中，我們需要將視口的寬度更改為等于或大于1350px。

.logo {  display: inline-block;  width: 45px;}@media (min-width: 1350px) {  .logo {    width: 180px;  }}復(fù)制代碼

這是簡單而直接的解決方案。

事例源碼：codepen.io/shadeed/pen…

帶有漸變的Logo

當(dāng) logo 具有漸變時，從Illustrator或Sketch等設(shè)計應(yīng)用程序?qū)⑵鋵?dǎo)出的過程可能并不完美，有時會中斷。

使用SVG，我們可以輕松地為logo添加漸變。 我添加了<linearGradient>并將其用作文本填充。

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">    <defs>      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">        <stop offset="0%" stop-color="#4a7def"></stop>        <stop offset="50%" stop-color="#ab4787"></stop>      </linearGradient>    </defs>      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">          <tspan x="63.923" y="36.923">Rect</tspan>        </text>      </g></svg>復(fù)制代碼

事例源碼：codepen.io/shadeed/pen…

用戶頭像

對于用戶頭像，它們具有很多形狀，但最常見的是矩形或圓形。 在此用例中，會介紹一個對你有用的重要技巧。

首先，讓我們看下面的模型。 請注意，我們有一個完美的化身，并且100％清晰。

但是，當(dāng)用戶上傳半白色頭像或非常淺的頭像時，這個設(shè)計就不太好了。

請注意，在上面的模型中，除非真正專注看，否則尚不清楚其中是否有一個圓圈。 這是一個問題。 為了解決這個問題，我們應(yīng)該在頭像內(nèi)添加邊框，以防圖像太亮看不清除。

我們有幾個選擇

• <img>元素

• <img> 和 <div> 元素

• <div>與CSS背景

• SVG <image>

哪一個最好？ 我們來探索探索。

使用 HTML <img>

你可能首先想到的是添加一個邊框，對吧?讓我們來探討一下這個問題。

.avatar {    border: 2px solid #f2f2f2;}復(fù)制代碼

我們的目標是使內(nèi)部邊框與圖像融合在一起，這種不太實用。

使用 <img> 和 <div> 元素

現(xiàn)在的問題是，要添加內(nèi)部邊框，我們不能使用box-shadow，因為它無法在圖像上使用。 解決方案用<div>包裹 頭像中，并添加專用于內(nèi)部邊框的元素。

HTML

<div class="avatar-wrapper">     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">     <div class="avatar-border"></div></div>復(fù)制代碼

CSS

.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);}復(fù)制代碼

通過在<div>上使用透明度10%黑色的邊框，我們可以確保邊框與深色圖像融合，并且只有在圖像較亮的情況下才可見。 參見下面的模型：

事例地址：codepen.io/shadeed/pen…

使用<div>與CSS背景

如果我要使用<div>來顯示頭像，則可能表示該圖像具有裝飾性。 我記得一個用例，它是分散在頁面中的隨機頭像。

HTML

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>復(fù)制代碼

CSS

.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);}復(fù)制代碼

事例地址:codepen.io/shadeed/pen…

使用 SVG <image>

對我來說，這是最有趣的解決方案。 我在檢查Facebook的新設(shè)計時注意到了它。

<svg role="none" style="height: 36px; width: 36px;">  <mask id="avatar">    <circle cx="18" cy="18" fill="white" r="18"></circle>  </mask>  <g mask="url(#avatar)">    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>    <circle cx="18" cy="18" r="18"></circle>  </g></svg>復(fù)制代碼

先對其進行剖析，它包含以下內(nèi)容：

• 用于將圖像剪切為圓形(circle )的蒙版(mask )

• 對其應(yīng)用了蒙版的組

• image本身帶有preserveAspectRatio =“ xMidYMid”

• 用于內(nèi)邊界的圓

circle {  stroke-width: 2;  stroke: rgba(0, 0, 0, 0.1);  fill: none;}復(fù)制代碼

事例地址：codepen.io/shadeed/pen…

原文：developers.google.com/web/fundame…

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。