仿站是很多前端工程師在開發過程中需要掌握的一項技能,它的實現需要借助 CSS 替換技巧。這里筆者總結了一些常用的 CSS 替換技巧,希望對大家有所幫助。
// 使用偽元素實現替換 .selector::before { content: ' '; display: inline-block; width: 20px; height: 20px; background-image: url('your-image.png'); } .selector::after { content: ' '; display: inline-block; width: 20px; height: 20px; background-image: url('your-image.png'); } // 使用 background-image 實現替換 .selector { background-image: url('your-image.png'); background-repeat: no-repeat; background-size: contain; } // 使用 img 標簽實現替換 <img src="your-image.png" alt="your-image" class="selector"> .selector { display: block; width: 20px; height: 20px; }
以上是常用的三種 CSS 替換技巧,通過它們可以實現很多常用的仿站需求。同時也需要注意,這些技巧有時候會影響頁面性能,需要根據實際情況進行選擇和優化。