當(dāng)前位置：
首頁 >
html 背景图自适应实例(css 利用position:absolute)
發(fā)布時(shí)間：2024/1/1
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
html 背景图自适应实例(css 利用position:absolute)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? 之前因?yàn)檫@個(gè)背景放大縮小問題困擾幾天，隨后找了很多方資料才解決... ?
?這次把他記錄下來，事出倉促就直接放自己的代碼了，效果圖如下。
代碼：
<%@ 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的使用僅有路徑的引用. 根據(jù)自己的url地址改--></head><style type="text/css">/* 很重要，以解決html 中很多默認(rèn)值問題，便于統(tǒng)一 一般情況下有一大堆初始化的 */*{margin:0;padding:0;}.main{/* 使用絕對(duì)定位，給他固定寬度高度 主要作用者 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設(shè)置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%"/><!-- 設(shè)置一個(gè)div 進(jìn)行絕對(duì)定位，利用img標(biāo)簽中的圖片作為背景圖. 接下來的div控制就由自己去設(shè)定了 --><div class="title"><ul><li style="margin-left: 8%;"><a href="${pageContext.request.contextPath}/app_jqm/main.jsp">二維碼系統(tǒng)</a></li><li><a href="http://www.wrtsz.com/">公司官網(wǎng)</a></li></ul></div><div class="bottom"><p>版權(quán)所有 ? 慧銳通智能科技股份有限公司 2001-2017 保留一切權(quán)利。</p><br/><p>粵ICP備14076561號(hào)-2</p></div></div></body> </html>簡單的一個(gè)界面，但也涉及到許多常用而又容易忘記的內(nèi)容 ?
總結(jié)
以上是生活随笔為你收集整理的html 背景图自适应实例(css 利用position:absolute)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pageoffice 骑缝章_JAVA调
- 下一篇： java使用web3j，部署智能合约在测