我怎樣才能使用只是一個CSS樣式表替換圖像

我想知道是否有可能使用唯一的樣式表替換HTML頁面上的圖像。我知道這是不常見的做法，但我可以訪問的唯一東西是樣式表，他們在html中使用內聯樣式。我無法編輯html文件。我怎樣才能使用只是一個CSS樣式表替換圖像

我檢查的元件，它看起來像這樣：

我試圖取代「bullet_ball_glass_green」的形象。我能加入這個樣式表來隱藏：

.rmLeftImage{ 

visibility: hidden; 
}

但是，它可能取代圖像或添加在它的上面而另一個沒有編輯HTML頁面？

來源

2012-10-18 Thomas Spade

html元素是否爲？ –

查看:: before僞元素，並將新圖像設置爲該元素的背景圖像。您可能需要隱藏隱藏的可見性，但這不適用於舊瀏覽器 –

是的，這是一個對不起，不知道爲什麼代碼沒有發佈。 html看起來像這樣： –

您可以在圖像周圍設置div的背景圖像（並保留隱藏圖像的css）。

.div_class{ 
    background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%; 
    width:100px; 
    height:100px; 
}

來源

2012-10-18 07:20:17 Justin

的CSS具有更高的層次比HTML樣式，你可以只添加

img.rmLeftImage { 
    background-image: url('path to your image'); 
}

來源

2012-10-18 07:24:28

跟上

知名度隱藏圖像：隱藏;

，因爲你希望它保持圖像的寬度/高度和更改背景圖片與

背景：網址（「urltoyourimage」）

來源

2012-10-18 07:25:42 Nathron

這裏，也許略有爭議的技術支持IE8+ and pretty much every other browser。

.rmLeftImage { 
    content: ''; 
} 

.rmLeftImage:after { 
    display: block; 
    content: ''; 
    background: url(../your/new/image); 
    width: 220px; /* image width */ 
    height: 240px; /* image height */ 
    position: relative; /* image width */ 
}

查看http://jsfiddle.net/z9QUu/2/舉例。迄今爲止，我只在Chrome中測試過它，它似乎可以工作。提供它可以跨瀏覽器使用，你根本不需要修改HTML。

有趣的是，我只能在將content: '';應用到.rmLeftImage後繼續工作，繼承人沒有它的jsfiddle：http://jsfiddle.net/Mw76h/，僅用於演示目的。

來源

2012-10-18 07:28:15

我怎樣才能使用只是一個CSS樣式表替換圖像

回答

相關問題