製作一個關閉的圖像出現在DIV的右上角

我想知道如何在div的右上角顯示一個小的十字（關閉）圖像。使用CSS和XHTML。由於製作一個關閉的圖像出現在DIV的右上角

2011-02-23 Hirvesh

你嘗試過這麼遠嗎？ SO不是「爲我的網站編碼」。儘管我們喜歡幫助，但是如果你能給我們一個失敗的例子，那會更好:) – Kyle 2011-02-23 08:50:31

我知道，但是我沒有得到最微不足道的想法。 – Hirvesh 2011-02-23 08:53:32

哈哈！那麼現在有一個例子:) – Kyle 2011-02-23 08:55:26

代碼片段：

#panel{ 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
} 
 
#close{ 
 
    display:block; 
 
    float:right; 
 
    width:30px; 
 
    height:29px; 
 
    background:url(https://web.archive.org/web/20110126035650/http://digitalsbykobke.com/images/close.png) no-repeat center center; 
 
}

<div id="panel"><a id="close" href="#"></a></div>

來源

2011-02-23 08:51:10 stecb

就是這樣。感謝那！ :) – Hirvesh 2011-02-23 08:54:42

套內的任何幫助，在這裏是在關閉按鈕另一個例子在DIV的右上角，代碼是一個用兩個不同大小的div來顯示它的例子，jQuery用於關閉點擊的圖像的父div。還有一個鏈接來重新顯示div。

CSS：

#content{ 
    border: solid black; 
    width: 70%; 
} 

#info{ 
    border: solid red; 
    width: 50%; 
} 

.close-image{ 
    display: block; 
    float:right; 
    position:relative; 
    top:-10px; 
    right: -10px; 
    height: 20px; 
}

HTML：

<a href="#" id="toggle-content">Show/Hide content</a> 
<br/><br/> 
<div id="content"> 
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" /> 
    <b><u>Content:</u></b><br/> 
    This is the info inside the div! 
</div> 
<br/><br/> 
<div id="info"> 
    <img class="close-image" src="http://residentialsearch.savills.co.uk/Content/Images/icon_close.png" /> 
    <b><u>Info:</u></b><br/> 
    Click the close button to hide this info! 
</div>

的jQuery：

$(".close-image").click(function() { 
    $(this).parent().hide(); 
}); 

$("#toggle-content").click(function() { 
    $("#content").slideToggle(); 
});

一個例子：click here

來源

2011-02-23 09:14:08 Scoobler

這個也不錯:) – Hirvesh 2011-02-23 09:21:57

這個簡單的例子可能會有所幫助。 =]

HTML

<div class="thumbnail"> 
    <img src="http://96pix.com/images/renee-v.jpg" /> 
    <a href="#" id="close"></a> 
</div>

CSS

.thumbnail { 
    position: relative; 
    width:300px; 
    height:300px; 
} 

.thumbnail img { 
    width:100%; 
    height:100%; 
} 

#close { 
    display: block; 
    position: absolute; 
    width:30px; 
    height:30px; 
    top: 2px; 
    right: 2px; 
    background: url(http://icons.iconarchive.com/icons/kyo-tux/delikate/512/Close-icon.png); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
}

例子： http://jsfiddle.net/PPN7Q/26/

來源

2014-09-11 02:38:50 user2282896

製作一個關閉的圖像出現在DIV的右上角

回答

相關問題