我可以用CSS替換圖片標籤的圖片嗎？

-1

我知道我無法使用CSS更改<img>標記的src屬性。但是有沒有可能隱藏來自src屬性的圖像，而是在<img>標記上設置背景圖像呢？我可以用CSS替換圖片標籤的圖片嗎？

我覺得這樣的事情：移動實際的圖像與填充/文本意圖等視圖和之後，設置img標籤的背景圖像，所以它看起來像一個其他圖像。

Js不是一個選項，因爲它是關於對現有頁面進行模板化的。

來源

2012-04-12 wutzebaer

背景圖像是什麼？你有一些div包含你的img標籤或什麼的？ – Gatekeeper 2012-04-12 07:47:42

它是動態更改還是在頁面加載完成？ – 2012-04-12 07:50:10

您能否重新說明您的問題，以便更清楚您想要什麼？ – 2012-04-12 07:51:18

您可以通過將img src指向1x1空白gif圖像來實現。

這是必要的，如果你不想添加另一個div，因爲所有的瀏覽器處理丟失的圖像和空的src屬性不同。（如果圖像丟失，鉻會在圖像周圍添加邊框）

然後，您可以通過更改背景圖像屬性來更改圖像。

UPDATE

您還可以創建圖像拼接爲和通過改變背景位置屬性動畫。例如：

假設您有兩張50像素寬的圖像，並且您希望第二張圖像顯示何時該元素被徘徊。只需將它們合併到一個圖像中，上面的CSS就可以實現。

img { background: url(sprite.jpg) 0 0 no-repeat; } 
img:hover { background: url(sprite.jpg) -50px 0 no-repeat; }

來源

2012-04-12 08:29:33 Ege

你可以隱藏圖像本身：

img#someid { display: none; }

，然後（或在此之前，如果你願意的話）的父元素上設置的背景。

來源

2012-04-12 07:47:55

我很抱歉，但這個CSS將實現頁面加載本身。那麼，爲什麼要更改HTML時去找css – 2012-04-12 07:54:56

@TejasvaDhyani：也許OP不能更改HTML（例如，它是由後端進程生成的，而不是他/她無法控制的）。（理想情況下，OP當然會解釋他們所處的情況。） – 2012-04-12 08:35:53

多數民衆贊成nealy我想要什麼，但我不想改變父母的元素，我認爲這樣的事情：移動實際圖像填充/文本意圖等視圖和之後，設置img的背景圖像-tag，所以它看起來像一個其他圖像 – wutzebaer 2012-04-12 11:42:01

我不太清楚'隱藏src屬性的圖像'是什麼意思，但如果你的意思是隱藏你正在顯示的圖像的鏈接/路徑，使用CSS（甚至作爲背景圖像），那麼答案是否定的，不是我所知道的。人們可以輕鬆查看您的CSS文件。隱藏它的唯一方法是使用JS，但即使如此，您仍然可以從客戶端禁用JS並仍然可以查看它。你可以把它放在像MySQL這樣的數據庫中，並使用PHP顯示它，但即使如此，圖像路徑仍然會顯示。

來源

2012-04-12 07:48:31

當OP說「隱藏」時，我認爲他/她意味着停止顯示，而不是使其位置與最終用戶保密。 – 2012-04-12 07:54:08

謝謝保羅，這讓你的編輯更有意義。提問者沒有迴應任何答覆問題。會讓我們的工作更容易一點:) – 2012-04-12 08:01:45

您是否可以將img封裝在沒有填充/邊距的div中，並將img的display屬性隱藏（通過js），以便顯示div的背景。

但說實話，如果你不費吹灰之力就可以做到這一點，你應該通過js交換圖像的src。

來源

2012-04-12 07:48:44 bernardw

我可以用CSS替換圖片標籤的圖片嗎？

回答

相關問題