網頁設計 img標籤 css換圖

img標籤 <img> 我們常常會需要做RWD的換圖,那該怎麼用css更換呢?

技巧如下:

------------------------------------------
<!--以下是html碼-->
<img src="assets/img/jackie_pc.png">


------------------------------------------
<!--以下是css碼-->
img{
  content: url("../assets/img/jackie_mobile.png");
}

如此一來就能搭配css的Media Query來自適應換圖啦~

@media screen and (max-width: 650px) {

}

PS. 若是寫了media query換圖後發現程式碼有寫,但一直換不了圖,怎麼辦呢?那就試試在後面加 !important ,如: content: url(“../assets/img/jackie_mobile.png”) !important;

保證讓他強制換圖。

發表迴響