訪問<img>用CSS標記

-1

我需要一些關於CSS的幫助。我正在嘗試創建一個包含大量<ul>和<li>標籤的樹。問題是我有很多<li>標籤與一個特定的類，並在該列表中我有一個<img>標籤。訪問<img>用CSS標記

如何訪問<img>標籤並放置不同的背景圖片？我很困惑如何指定我的<img>標記與<li>的類，然後設置背景圖像。

注：CSS3不允許

<ul> 
    <li class="leaf"><img></li> 
    <li class="leafhidden"><img></li> 
    <li class="leafhidden"><img></li> 
</ul>

謝謝

來源

2014-02-13 user3307470

等一下，你想在img上設置背景圖片嗎？爲什麼不使用li來設置背景圖？ – brouxhaha

我必須有一個漫長的一天，我沒有注意到這個大聲笑 – httpgio

像這樣？ http://cssdesk.com/WjYfD –

ul li.leaf img {background:url(/images/img.jpg);}  
ul li.leafhidden img {background:url(/images/img2.jpg);}

來源

2014-02-13 22:48:52 httpgio

先生，我認爲它應該是背景圖像，但仍然不起作用 – user3307470

並不需要背景圖像，背景有簡寫代碼，所以它會像那樣工作。這是行不通的，因爲你正在給img一個背景圖片..把圖片取出來，在li上定義寬度和高度，並給li的背景圖片 – httpgio

從你的標記中移除img，並指定li的背景圖片 – httpgio

-1

就這麼簡單：

ul li img { /*do your styling here*/ }

編輯：

錯過了關於類點：

ul li.leaf img { /*do your styling here*/ }

來源

2014-02-13 22:48:57 Morpheus

他想知道如何宣佈不同類的孩子 – httpgio

如何把圖像放入img標籤...用css – user3307470

不要認爲這是可能的。爲什麼你不能使用' Morpheus

使用後代組合子。

.leaf img { 
    background-image: url('leaf.png'); 
}

除非圖像是半透明的，否則這將不會做任何事情。

這就是說，它看起來像你試圖用CSS指定內容圖像。不要這樣做。使用src屬性（並添加適當的alt屬性）。

來源

2014-02-13 22:49:31 Quentin

背景圖像不起作用 – user3307470

此代碼將.leaf進去看看img標籤，然後更改圖片：

.leaf img:hover { 
    content:url('http://rookery.s3.amazonaws.com/941000/941430_96b2_625x1000.jpg'); 
}

我做了一個搗鼓你：http://jsfiddle.net/3DXD2/

來源

2014-02-13 22:56:27

先生我提到沒有CSS3 ....內容是css3的一部分 – user3307470

['content']（https://developer.mozilla.org/en-US/docs/Web/ CSS/content）屬性和['：hover']（https://developer.mozilla.org/en-US/docs/Web/CSS/:hover）都來自CSS 2，它享有[相當廣泛的支持]（ http://caniuse.com/css-sel2）。更重要的是它是這份工作的正確工具。 –

內容dosent在ie7上工作... – user3307470

得到這個工作的唯一方法與上img使用background CSS如下：

DEMO

.leaf > img { 
    background: url(http://placekitten.com/200/200) no-repeat; 
    width: 200px; 
    height: 200px; 
}

因爲img和li標籤都是空的，所以當background被聲明爲其中任何一個時什麼都不會顯示。所以你必須指定一個寬度和高度。

來源

2014-02-14 03:03:52 brouxhaha

訪問<img>用CSS標記

回答

相關問題