一想到替換圖片，我們大部分人可能都會想到用background-image或用兩個img元素控制顯示隱藏來實作，其實還可以利用css的content屬性來替換img中的內容來實作，

Part 1

1.首先我們使用content屬性來生成一張圖片，先寫兩個img標簽

    <img src="img/qaq.jpg">
    <img>

2.第一個img用src引入一張圖片，第二個img是個空標簽，注意這里不要寫src屬性，就是一個單純的< img >！然后寫css

img {
   width: 200px;
   height: 200px;
}
img:not([src]) {
   content: url("img/qq.jpg");
}

3.用谷歌瀏覽器運行，可以看到這兩個img標簽的顯示效果一模一樣！

在這里插入圖片描述
左邊為img標簽直接引入的圖片，第二個是用content屬性生成的圖片，

Part 2

1.如果我們把上面的代碼稍微修改一下，會發生怎樣的變化呢

<img src="img/qaq.jpg">
<img>

img {
   content: url("img/qq.jpg");
}

2.如下圖所示，可以發現content屬性把原來圖片中的內容替換掉了！

在這里插入圖片描述

利用這個特點，我們可以使用hover圖片讓它變成另外一張圖片

<img src="img/qaq.jpg">

img:hover {
    content: url("img/qq.jpg");
}

注意??：content改變的僅僅是視覺展現效果，當我們右鍵保存或打開這張hover之后的圖片時，所保存的和看到的還是原來src對應的圖片！

content屬性不僅可以替換img標簽的圖片，還可以替換普通標簽的內容

舉個例子，看如下代碼：

<h1>陳仙生的頭像</h1>

h1 {
    content: url("img/qq.jpg");
    width: 200px;
}

運行結果就是一張圖片，沒有文字！

在這里插入圖片描述
需要注意的是，這里的文字只是視覺上被替換了，螢屏閱讀設備讀取到的還是文字內容，SEO搜索引擎抓取的也還是原文字資訊，所以對頁面的可訪問性沒有任何影響，

此外，我們還可以配合before或after偽類給空標簽生成文本，如下：

<h1></h1>

h1:before {
    content: '我是content生成的內容';
    width: 200px;
}

在這里插入圖片描述
這里需要注意的是用content生成的文本內容是不可以選中和復制的！把滑鼠放到上面的文字上面你就會發現無法選中！

我覺得content屬性用的最常見的地方之一是清除浮動帶來的影響：

.clear_fix:after {
	content: '';
	display: block;
	clear: both;
}

還有就是配合 @font-face 字體圖示的實作：

.icon-xxxx:after {
	content: '\xxxx';
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/96714.html

標籤：AI