为什么图片会覆盖文字的显示_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:17:02
Original
4675 Leute haben es durchsucht

图片一旦下滑以后图片就会被遮住了 如何让文字不被图片遮住 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").mouseover(function(){var id= $(this).attr("id");var i=id.replace("A", "B");$("#"+i).animate({top:"0px"},400);  }); $("a").mouseout(function(){var id= $(this).attr("id");var i=id.replace("A", "B");$("#"+i).animate({top:"-149px"},400); }); }); </script>   <style type-"text/css">img { position:absolute;      top:-149px; }li{margin: 0; padding: 0; border: 0;}ul {width: 700px; margin: 0 auto; text-align: center;}	li {float:right;list-style: none;}	 li  a{                 display: block;                      width: 97px;                                       	     padding: 72px 0 0 0;                    margin: 0 32px 0 32px;      	     font: bold 16px Helvetica;     }</style> <ul><li><a id="A1" >A</a><img  id="B1"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li> <li><a id="A2" >B</a><img  id="B2"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li><li><a id="A3" >C</a><img  id="B3"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li> <li><a id="A4" >D</a><img  id="B4"src="1.png" / alt="为什么图片会覆盖文字的显示_html/css_WEB-ITnose" ></li></ul>
Nach dem Login kopieren


回复讨论(解决方案)

position:absolute;
如果某个标签带有这个属性,那么该标签就不在归属于文档流,那么如果在该标签定义的位置也有其他标签,那么这个标签会覆盖其他没有带有position:absolute;这个属性的标签。

像这样的,需要特别注意,可以都加上position属性,或者就得自己控制,别被覆盖到了。

应该是这样的

高手帮我修改一下 这样说我修改不出

li  a{	position:relative;	top:20px;	z-index:1000;	display: block;                      	width: 97px;                                                	padding: 72px 0 0 0;                    	margin: 0 32px 0 32px;               	font: bold 16px Helvetica;		}
Nach dem Login kopieren


修改上面那三个,或者你查一下上面三个的意思,按照自己要的,进行修改试试吧

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage