理解 content 與替換元素
阿新 • • 發佈：2018-12-06
1、基於偽元素的圖片內容生成技術 與 內容的替換
下文 html 中的 img 標籤中的 data-src 的內容，請自己替換成正確內容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img { display: inline-block; width: 256px; height: 192px; /* 隱藏Firefox alt文字 */ color: transparent; position: relative; overflow: hidden; } img:not([src]) { /* 隱藏Chrome alt文字以及銀色邊框 */ visibility: hidden; } img::before { /* 淡藍色佔位背景 */ content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #f0f3f9; visibility: visible; } img::after { /* 黑色alt資訊條 */ content: attr(alt); position: absolute; left: 0; bottom: 0; width: 100%; line-height: 30px; background-color: rgba(0,0,0,.5); color: white; font-size: 14px; transform: translateY(100%); /* 來點過渡動畫效果 */ transition: transform .2s; visibility: visible; } img:hover::after { transform: translateY(0); } </style> </head> <body> <img alt="美女沉思圖" data-src="1.jpg"> <p> <button>設定src屬性顯示圖片</button> </p> </body> <script> var eleButton = document.querySelector('button'), eleImg = document.querySelector('img'); if (eleButton && eleImg) { var initValueButton = eleButton.innerHTML; // 圖片地址 var srcImage = eleImg.getAttribute('data-src'); // 移除該屬性 eleImg.removeAttribute('data-src'); // 按鈕點選事件 eleButton.addEventListener('click', function() { if (this.innerHTML == initValueButton) { this.innerHTML = '移除src屬性'; // 圖片顯示 eleImg.setAttribute('src', srcImage); } else { this.innerHTML = initValueButton; // src屬性移除 eleImg.removeAttribute('src'); } }); } </script> </html>
2、實現 img 標籤中圖片的替換（也可將 非替換標籤中 文字與圖片 互相替換）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .emoji:hover { content: url(laugh-tear.png); } .h1:hover{ content: url(/images/4/logo.png); margin: auto; height: 34px; } </style> </head> <body> <img class="emoji" src="laugh.png"> <h1 class="h1"> css世界 </h1> </body> </html>
3、content 換行符與打點 loading 效果例項（注意下文想要實現動態效果，只能用 before）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } } </style> </head> <body> 正在載入中<dot>...</dot> </body> </html>