CSS 如何实现垂直居中图片弹窗的效果?

html-css019

CSS 如何实现垂直居中图片弹窗的效果?,第1张

在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。直接上CSS代码:#pic{width:300pxheight:300pxbackground-color:greenborder:6pxsolid#ccctext-align:centerposition:relativedisplay:.

1.在同一个div中,编写如下图所示的一段代码,并在这段代码中设置dive的宽度和高度,以便文本具有特定的范围。

2.找到背景,如下图所示,添加背景后的图像作为背景图案。

3.在后台添加url()。为了连接图像,在url中写入背景图像的路径。

4.你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。

5.这样,保存后的文本将覆盖在图片的顶部。

先把图片控制大小!!

点击后!大小auto!!

再次点击大小还原!!

<script type="text/javascript">    

$(document).ready(function(){    

  

$("#ck").children('img').click(function(){

if( $("this").hasClass('current')){ 

$(this).next("ul").removeClass("current")

$("this").css('width',"auto")

$("this").css('height',"auto")

}else{

$(this).addClass("current")

$("this").css('width',"50px")

$("this").css('height',"50px")

}

})

没试过!!你先试下吧!!