CSS文字或图片悬浮于另一张图片上,大小宽度适配手机的!

原创 2013年12月02日 16:22:14
<div class="header clearfix">
	<div class="hd-c">
  	<div class="banner">
		<div class="pic">
		  <img  src="1.jpg" class="png-24" alt="banner"><!--背景图-->
		</div>	
  		<div class="frame">
		<img class="changing-over" src="progress.gif"><!--悬浮图-->
		</div>
		</div>
	</div>
</div>


上面是HTML布局,下面是CSS样式


.clearfix {
float: none;
clear: both;
}

.header {
position: relative;
width: 100%;
height: auto;
}

.hd-c {
position: relative;
overflow: hidden;
width: 100%;
height:auto;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-ms-background-size: 100% 100%;
}

.hd-c .banner {
width: 100%;
height: auto;
position: relative;
margin: 0 auto;
}

.content {
text-align:center;

}

.banner .frame {
position: absolute;
top:50%;<!--悬浮相对于背景位置的一半-->
left:32%;<!--相对于左边-->
z-index: 2;<!--让图片悬浮于背景之上-->
width: 45%;<!--图片宽度大小-->

}

.banner .pic {
position: relative;
width: 100%;
height: auto;
text-align: center;
}

.banner .png-24 {
_display: none;
width: 100%;
height: auto;
margin: 0 auto;
}

.banner .frame .changing-over{float:left;margin:1px 0 1px 1px;width:100%;height:auto;text-align:center}



注:红色框部分即悬浮的图片,是个动态的Gif图片进度条

版权声明:本文为博主原创文章,未经博主允许不得转载。

html+css鼠标悬浮显示图片

初学html,在这里留下足迹。如有谬误,请多指教。 主要步骤:1、将对应的大图小图存放在同一个li标签中(鼠标悬浮到小图时,方便定位到大图)。 2、内部样式中利用...

CSS漂浮 让图片飘在页面的外面

CSS漂浮 让图片飘在页面的外面 position:fixed; right:0px; bottom:0px
  • qzmrock
  • qzmrock
  • 2014年05月21日 10:36
  • 2328

背景图片如何自适应屏幕

自己比较头疼的问题,网上搜了好多资料,大概整理了一下 1. 直接设置CSS样式达到目的    在以上代码中,background-size: cover;是对背景图进行等比例拉伸,仍然存在图片显示...

EventHandle事件委托(通过状态发生改变时判断)

EventHandler事件委托,事件就是类或者对象的状态发生改变时,对象或类发出的信息或通知。发出信息的对象或者类称为“事件源”,对事件处理的方法称为“接收者”。通常事件源在发出状态改变信息,它并不...

微信小程序image图片自适应宽度比例显示的方法

我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1、src              图片资源地址 2、mode          图片裁剪、缩放的模式 3、binde...

android中如何使用一张图片适配不同尺寸的APP引导页

在我们平常开发的过程中在做引导页适配的时候,有时候会犯难,怎么样作图可以将各种不同尺寸分辨率的手机都适配好也就是不变形不拉伸,官方给的说法也只是做多套图去适配不同的分辨率,遇到全屏展示引导这种问题的时...

html图片自适应手机屏幕大小的css写法

代码如下: body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,tex...

判知图片的大小(宽度与高度)

  • 2012年01月15日 14:53
  • 22KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS文字或图片悬浮于另一张图片上,大小宽度适配手机的!
举报原因:
原因补充:

(最多只允许输入30个字)