html 背景图自适应实例(css 利用position:absolute)

之前因为这个背景放大缩小问题困扰几天，随后找了很多方资料才解决...

这次把他记录下来，事出仓促就直接放自己的代码了，效果图如下。

代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>慧锐通智能科技股份有限公司</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src=${pageContext.request.contextPath}/js/jquery.js></script>
	<metaname=”viewport”content=”width=device-width, initial-scale=1″ />
	<!--
		这里使用的是jsp 但此处java的使用仅有路径的引用.  根据自己的url地址改
	-->
  </head>
 <style type="text/css">
 	/* 很重要，以解决html 中很多默认值问题，便于统一   一般情况下有一大堆初始化的 */
    *{margin:0;padding:0;}
 	.main{
 		/* 使用绝对定位，给他固定宽度高度 主要作用者 position:absolute;*/
 		height:100%;
 		position:absolute;
 		left:0;right:0;top:0;bottom: 0;
 	}
 	
 	.title{
 		width: 100%;
 		height: 72px;
 		background: #000000;
 		background:rgba(0,0,0,0.4);
 		position:absolute;
 		left: 0;top: 0;
 	}
 	
 	.bottom{
 		margin: 0 auto;height: 100px;
 		width: 40%;
 	    position:absolute; 
 	    left:30%;
 	    bottom:0;
 	    text-align: center;
 	    font-size: 14px;
 	}
 	ul li{
 		list-style: none;
 		float: left;
 		width: 200px;
 		height: 72px;
 		font-size: 18px;
 		text-align: center;
 		line-height: 72px;
 	}
 	a{
 		text-decoration: none;
 		color: #ffffff;
 	}
 </style>
 <script type="text/javascript">
  	$(function(){
        $("li").mouseover(function (){  
        	$(this).css({"height":"76","background-image":"url('${pageContext.request.contextPath }/images/titlemouser.png'"});
        }).mouseout(function (){  
            //background:rgba(0,0,0,0.5)   代表透明度，以解决div设置opacity后里面元素也跟着透明问题。
        	$(this).css({"background":"rgba(0,0,0,0)","height":"72"});
        });
  	});
 </script>
  <body>
     <div class="main" >
     	<!-- 背景图 -->
     	<img src="${pageContext.request.contextPath}/images/1920X1080.jpg" width="100%"/>
     	<!-- 设置一个div 进行绝对定位，利用img标签中的图片作为背景图.  接下来的div控制就由自己去设定了 -->
     	<div class="title">
     		<ul>
     			<li style="margin-left: 8%;"><a href="${pageContext.request.contextPath}/app_jqm/main.jsp">二维码系统</a></li>
     			<li><a href="http://www.wrtsz.com/">公司官网</a></li>
     		</ul>
     	</div>
     	
     	<div class="bottom">
     		<p>版权所有 © 慧锐通智能科技股份有限公司 2001-2017 保留一切权利。</p><br/>
     		<p>粤ICP备14076561号-2</p>
     	</div>
     </div>
  </body>
</html>

简单的一个界面，但也涉及到许多常用而又容易忘记的内容

html 背景图自适应实例(css 利用position:absolute)

猜你喜欢