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)相关推荐

itextsharp php,C#_C#使用iTextSharp设置PDF所有页面背景图功能实例，本文实例讲述了C#使用iTextSharp - phpStudy...
C#使用iTextSharp设置PDF所有页面背景图功能实例本文实例讲述了C#使用iTextSharp设置PDF所有页面背景图功能的方法.分享给大家供大家参考.具体如下: 在生成PDF 的时候,虽然 ...
vue 背景图自适应_Vue的自适应视频背景播放器
vue 背景图自适应 Vue响应视频背景播放器 (vue-responsive-video-background-player) Play your own videos in background ...
Android实现背景图自适应不失真
不少人开发了不少Android应用程序,中间必遇到一事,就是Android背景图片的自适用及失真问题,因此,本篇解决了这个问题并写出来与大伙分析,此篇为之android开发人员的必备知识,欢迎阅读: ...
背景图宽度自适应及背景图合并的CSS思想
关于宽度自适应,已经是前段开发人员必备的css技能之一,而背景图的合并则属于更高级别的要求. 我们为什么要宽度自适应,原因大体有以下几点: 第一:很多情况下有这样的需求,比如做B/S前端,90%以上要 ...
Css 如何使纯颜色/背景图自适应的铺满全屏
摘要他喵的我觉得一般就是三种需求: 1.纯颜色解释:即只有background-color,没有图需求:应至少充满一个视窗,如果内容超出一个视窗,自适应填充.比如知乎首页. 2.背景图需求很动 ...
CSS背景图自适应屏幕
1.问题:屏幕小,图片大,会出现图片在屏幕里显示不全的问题 2.处理:自适应屏幕,无论背景图与屏幕是否一致,都可以自适应大小.匹配 3.方案 background: url("imgs/bc ...
如何给HTML文件加一张背景图,如何在css中添加背景图？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css background属性就是专门设 ...
php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层？
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...

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

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

最新文章

热门文章