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图片进度条

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

相关文章推荐

CSS实现背景图片固定

body {  background-image:url('bg.jpg');  background-repeat: no-repeat;  background-attachment: fi...

【android】图片放错文件夹引起显示大小不同的原因与屏幕适配原理

大纲 1、android中res目录下的文件夹所对应屏幕尺寸 2、用dp表示尺寸的原理 3、对于720p尺寸的适配需要注意什么 4、ui切图按什么尺寸给最好 参考:htt...

屏幕图片及文字适配

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://mikewang.blog.51cto.com/3826268/865304 ...

Android下WebView的图片适配加载与文字自动换行处理

相信各位在Android开发中使用WebView加载页面的时候,或多或少会遇到一些网页适配的问题,例如图片过大或者是单行文字过长, 导致网页可以左右拖动,使自己加载出来的网页显得非常的low,下面介绍...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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