<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>40-css背景圖片和插入圖片的區別.html</title> <style> p{ width: 200px; height:200px; background-color: red; } .box1{ background-image: url("images/image.png"); background-repeat: no-repeat; background-position: right bottom; } </style> </head> <body> <!-- 1,背景圖片和插入圖片的區別? (1),背景圖片僅僅是一個裝飾,你不會佔用位置,插入圖片會佔用位置 (2),背景圖片有定位屬性,很方便的控製圖片的位置,插入圖片沒有定位屬性 (3),插入圖片的語義比背景圖片的語義要強,所以在企業開發中你的圖片如果從想讓搜尋引擎收錄,那麼推薦使用插入圖片--><p class="box1">我是一個文字</p><p class="box2"> <img src="images/image.png" alt=""> 我是文字</p> </body> </html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>42-css精靈圖.html</title> <style> .box1{ width: 100px; height: 100px; background-image: url("images/bg.jpg"); background-position: -422px -190px; } </style> </head> <body> <!-- 1,什麼是css的精靈圖? 是一種映像的合成技術，說白了，就是在一張整合了好多張圖片的大圖片上根據background-position顯示要顯示的圖片 2,css精靈圖的作用? 可以減少請求的次數,降低伺服器的壓力 3,如何使用css精靈圖? css精靈圖需要配合背景的圖片和背景定位--><p class="box1"></p></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
