整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
端開發人員在構建網站時需要做的一個決定是引入圖片的方式。它可以是<img>標簽，或者是通過CSS background 屬性，還可以使用 SVG<image>。選擇正確的方式是很重要的，它對性能和可訪問性有很大的影響。
在本文中，我們會學習引入圖像的各種方式，以及每種方式的優點和缺點，以及何時使用和為什么使用它們。
最簡單的情況下，img元素必須包含src屬性:
<img src="cool.jpg" alt="">在頁面加載時，它們會在頁面圖像加載時發生一些布局變化。為了避免這種情況，我們可以為它設置width和height屬性:
<img src="cool.jpg" width="200" height="100" alt="">雖然對某些人來說，這可能看起來太過簡單了，但它是有用的。我們用圖例的方式來理清這個概念：
我們看到到右側圖片即使尚未加載仍保留了空間？那是因為設置了寬度和高度。
圖像可以用 CSS 隱藏。但是，它仍將加載在頁面中。因此，在執行此操作時請小心。如果一個圖像應該被隱藏，那么它可能是出于裝飾的目的。
img {
display: none;
}同樣，上面的方法也不能阻止瀏覽器加載圖像，即使它在視覺上是隱藏的。原因是<img>被認為是一個被替換的元素，所以我們無法控制它所加載的內容。
通過將alt屬性設置為有意義的描述，用來訪問 HTML 圖像，這對于屏幕閱讀器用戶非常有幫助。
然而，如果一個alt描述是不需要的，請不要刪除它，如果你這樣做，圖像src將被讀出,這對可訪問性非常不利。
不僅如此，如果圖像因為某種原因沒有加載，并且它有一個清晰的alt，它將作為一個回退顯示。同樣通過圖例來演示一下。
假設我們有以下圖片：
<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">當src無效，圖片沒有加載時。第一個沒有alt屬性，而第二個是空的alt屬性，下面是它們的視覺效果：
沒有alt的圖片仍然保留了它的空間，這很混亂，而且不利于訪問。而另一個alt為空的圖片，會折疊起來看起來像一個小點，這里因為它有邊框。
但是，當alt屬性有值，它看起來是這樣的：
這不是一個很好的反饋嗎?此外，當圖像源失敗時，可以向它們添加偽元素。
<img>的優點在于可以針對特定視口大小將其擴展為具有多個版本的照片。我們有兩種不同的方式來生成一組響應式圖像：
1.srcset屬性
<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">這很簡單。對我來說，srcset可以根據屏幕寬度顯示多個圖像尺寸，這并不是一種完美的解決方案。它讓瀏覽器選擇合適的圖像，而我們對此無能為力。
2.picture 標簽
另一種選擇是使用<picture>元素。我更喜歡這種方式，因為它更容易預測。
事例源碼：https://codepen.io/shadeed/pen/d703aee137f38c138f2323a0252548ac?editors=1100
對于<img>，我們還可以使用的一組很好的特性object-fit和object-position。它們可以控制<img>的大小和定位，就像CSS背景圖像。
object-fit 值有：fill, contain, cover, none, scale-down。例如：
img {
object-fit: cover;
object-position: 50% 50%;
}使用CSS背景顯示圖像時，它需要一個具有內容或特定寬度或高度的元素。通常，背景圖像的主要用途應該是用于裝飾目的。
首先，我們需要一個元素
// html
<div class="element">Some content</div>
// css
.element {
background: url('cool.jpg');
}使用CSS背景圖片的好處是可以設置多個背景。考慮以下示例：
.element {
background: url('cool-1.jpg'), url('cool-2.jpg');
}我們可以在特定視口中隱藏和顯示圖像，如果未使用CSS設置圖片，則不會下載該圖片。與使用<img>相比，這是一個額外的好處。
在上面的示例中，我們有一個背景圖像，僅在視口寬度大于700px時顯示。
如果使用不當，背景圖像可能會影響可訪問性。例如，將其用于文章主題，這對于文章至關重要。
普通人知道，如果要保存圖像，只需單擊鼠標左鍵，然后選擇保存即可。CSS 背景圖片并非如此，我們必須先檢查元素，然后在DevTools中的url中打開鏈接，然后才能下載隨CSS添加的圖像。
可以將偽元素與CSS背景圖像一起使用，例如在圖像頂部顯示覆蓋圖。對于<img>這是不可能的，直到我們為疊加層添加單獨的元素。
SVG被認為是一種圖像，它最大的功能是在不影響質量的情況下進行縮放。此外，使用SVG，我們可以嵌入JPG、PNG或SVG圖像。參見下面的 HTML:
你是否注意到了prepareAspectRatio？它的作用是可以讓圖像占據SVG的整個寬度和高度，而不會被拉伸或壓縮。
當<image>寬度較大時，它將填充其父級（SVG）寬度而不會拉伸。
這非常類似于 CSS 中的object-fit: cover或background-size: cover。
關于SVG 的可訪問性，這使我想起了<title>元素。例如，我們可以像下面這樣添加它：
我們還可以使用<desc>元素
必須先檢查元素并復制圖像的URL，然后才能下載嵌入SVG的圖像。但是，如果我們要防止用戶下載特定的圖像，這可能是一件好事。
在構建hero section時，有時我們需要在標題和其他內容下方的圖像。參見下圖：
一些要求：
在開始解決方案之前，讓我們先問問自己這種背景的性質。這是一些入門問題：
通過使用多個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;
}雖然此解決方案有效，但可以使用 JavaScript 動態更改背景圖片。見下面：
<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>這里添加了一個內聯樣式。雖然這是可行的，但它看起來很丑，而且不實用。
也許我們可以使用CSS變量？讓我們來探索一下。
<section class="hero" style="--bg-url: url('landscape.jpg')">
<!-- Hero content -->
</section>現在，我們可以輕松地更新--bg-url變量來動態更改背， 這比內聯的東西好一百萬倍。
小結：
事例源碼：https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522
該方案是可以使用一個 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>在CSS中，我們需要將圖片絕對定位在內容下方，并且還需要使用偽元素作為疊加層。
此解決方案的優點在于，可以輕松更改圖片的src屬性。同樣，如果圖像很重要，它將會更加有用。
另外，我喜歡使用HTML <img>的功能是能夠在未加載圖片的情況下添加回退。回退至少可以使內容保持可讀性。
.hero img {
/* Other styles */
background: #2962ff;
}在圖片源路徑不對時，背景顏色是一個代替方面。
事例源碼：https://codepen.io/shadeed/pen/73a2ca78141fcab39d6db9d5bd982728?editors=1100
網站 Logo是很重要的，因為它可以將網站與其他網站區分開。要嵌入徽標，我們有一些選擇：
接下來，我們來看看哪種方式更合適。
當徽標具有許多細節或形狀時，將其用作嵌入式SVG可能沒有好處。我建議使用<img>，圖像類型可以是png，jpg或svg。
我們有一個簡單的logo ，其中包含形狀和文字。懸停時，形狀和文本需要更改顏色。怎么做？對我來說最好的解決方案是使用嵌入式SVG。
HTML
CSS
.logo rect,
.logo text {
transition: 0.3s ease-out;
}
.logo:hover rect,
.logo:hover text {
fill: #4a7def;
}事例源碼：https://codepen.io/shadeed/pen/4005077cc543647148007f4834c0585c?editors=0100
這讓我想起了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>在CSS中，我們需要將視口的寬度更改為等于或大于1350px。
.logo {
display: inline-block;
width: 45px;
}
@media (min-width: 1350px) {
.logo {
width: 180px;
}
}這是簡單而直接的解決方案。
事例源碼：https://codepen.io/shadeed/pen/6cf55d4e87b7c443820bd5f8694587a8?editors=1100
當 logo 具有漸變時，從Illustrator或Sketch等設計應用程序將其導出的過程可能并不完美，有時會中斷。
使用SVG，我們可以輕松地為logo添加漸變。我添加了<linearGradient>并將其用作文本填充。
事例源碼：https://codepen.io/shadeed/pen/9bf3bee3d08a40411effb5d65f25b5c1?editors=1100
對于用戶頭像，它們具有很多形狀，但最常見的是矩形或圓形。在此用例中，會介紹一個對你有用的重要技巧。
首先，讓我們看下面的模型。請注意，我們有一個完美的化身，并且100％清晰。
但是，當用戶上傳半白色頭像或非常淺的頭像時，這個設計就不太好了。
請注意，在上面的模型中，除非真正專注看，否則尚不清楚其中是否有一個圓圈。這是一個問題。為了解決這個問題，我們應該在頭像內添加邊框，以防圖像太亮看不清除。
我們有幾個選擇
哪一個最好？我們來探索探索。
你可能首先想到的是添加一個邊框，對吧?讓我們來探討一下這個問題。
.avatar {
border: 2px solid #f2f2f2;
}我們的目標是使內部邊框與圖像融合在一起，這種不太實用。
現在的問題是，要添加內部邊框，我們不能使用box-shadow，因為它無法在圖像上使用。解決方案用<div>包裹 頭像中，并添加專用于內部邊框的元素。
HTML
<div class="avatar-wrapper">
<img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
<div class="avatar-border"></div>
</div>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);
}通過在<div>上使用透明度10%黑色的邊框，我們可以確保邊框與深色圖像融合，并且只有在圖像較亮的情況下才可見。參見下面的模型：
事例地址：https://codepen.io/shadeed/pen/da23d9a18dac14692a97e1bc6e86a5ff?editors=1100
如果我要使用<div>來顯示頭像，則可能表示該圖像具有裝飾性。我記得一個用例，它是分散在頁面中的隨機頭像。
HTML
<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>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);
}事例地址:https://codepen.io/shadeed/pen/39eb9dac364ec15b9ab9bae7fe3a7148?editors=0100
對我來說，這是最有趣的解決方案。我在檢查Facebook的新設計時注意到了它。
先對其進行剖析，它包含以下內容：
circle {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}事例地址：https://codepen.io/shadeed/pen/b17d34b5c23cc90fdc4573779544c8c7?editors=0100
作者：ahmad shadeed 譯者：前端小智
原文：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images
大家可能都知道img標簽是怎么設置默認圖片的，但是你知道background-img是如何設置默認圖片的嘛？
html中如何設置默認圖片？
<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認圖片的url地址'"/>
這里是應用了img標簽的onerror事件，當加載失敗就用默認圖片地址。但是這里可能出現如果默認圖片地址也加載不出來，或者失敗，在IE內核的瀏覽器下就會反復加載，出現死循環，最后造成堆棧溢出錯誤。因此， 需要用下面兩種方法解決：
<img src="圖片的url地址" alt="圖片描述" onerror="this.src='默認圖片的url地址';this.onerror=null"/>
html中如何設置默認圖片？
background是可以設置多個背景圖片的，最前面的優先級越高，所以如果javan1.jpg沒有就好顯示第二個javan2.jpg，如果還沒有就好顯示第三個javan3.jpg。
第一種：
background: url("javan1.jpg") 0 0 no-repeat,
url("javan2.jpg") 200px 0 no-repeat,
url("javan3.jpg") 400px 201px no-repeat;
第二種：
background-image: url("javan1.jpg"), url("javan2.jpg"), url("javan3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
需要注意的是：IE8及更早瀏覽器不支持CSS3 background-image，即不支持多背景和使用漸變作為背景圖像。
background-image: linear-gradient( [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );
上面這種CSS語法我們經常見到，可能有人看不懂具體的意思，其實上面的些符號含義與正則表達式有很多一致之處：
水平漸變
{
background-image: linear-gradient(left, red 100px, yellow 200px);
}
CSS水平漸變
左上角漸變
{
background-image:linear-gradient(left top, red 100px, yellow 200px);
}
CSS左上角漸變
喜歡小編的點擊關注，了解更多資源！
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
圖片標簽 img
屬性
alt 圖片找不到時顯示的內容
src 圖片的位置
width寬度
height高度
border 邊框
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
