图片全屏背景 代码实例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片展示</title>
    <meta name="Keywords" content="关键词1,关键词2">
    <meta name="description" content="网页的描述内容">
    <!--响应式mate标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <base target="_blank"/>

    <style>
    </style>
</head>
<body>
    <div id="loginbg" style="overflow: hidden; position: absolute; top: 0px;
    left: 0px; width: 100%; height: 100%; z-index: -1; display: block;
     background-image: url(‘77.jpg‘); background-size: cover;">

    </div>

<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

</script>
</body>

</html>

效果图:

时间: 2024-12-24 17:38:08

图片全屏背景 代码实例的相关文章

图片全屏显示代码-css3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" rel="stylesheet"> *{margin: 0;padding: 0;} html{ height: 100% } body

CSS之生成全屏背景图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS之生成全屏背景图片</title> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundima

Android开发中的全屏背景显示方案

引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status Bar隐藏掉,然后用户进入一种沉浸的状态,形成更强烈的视觉冲击.一方面,这可以给用户留下更深刻的使用体验,从而产生一定品牌效应:另一方面,也给应用的启动初始化留下了充裕的时间,避免因为启动时间过长而给用户留下不良的印象.因此,全屏显示在手机应用中得到了广泛的应用.那么这篇博客中就记录下全屏显示的一

jquery全屏背景轮播切换的登录页

很大气漂亮的注册登录页面模板,带背景全屏轮播JS特效,基于jQuery实现,可左右按钮实现背景全屏切换,全屏效果是基于背景图片平铺,插件支持自动切换播放. 演示    下载 <!DOCTYPE html> <html> <head> <title>jquery带全屏背景图片轮播切换的注册登录页面-素材吧</title> <meta name="keywords" content="jQuery背景全屏轮播,JS

如何实现图片全屏(当图片大小不够大时)

方法一: 背景图片全屏要点: 1.设置包裹div 高和宽为:100% {width:100%; height:100%;} 2.设置包裹div 的 position为relative (position:relative;) 3.设置背景图片高和宽为:100% {width:100%; height:100%;} 4.设置背景图片position 为absolute {position: absolute;} 5.设置背景图片z-index 为-1 {z-index:-1;} 方法二: 1.设置

CSS之全屏背景图

吐槽啦:Yeah  明天就是国庆了!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全拼背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当background-size的值

手机端 — 点击图片全屏查看

在公众号中提交服务需求工单后,经过"待分配"."待执行"."执行中"."待验收" 这些阶段后,需要验收人提交评论上传图片才能变成"已完成". 做好后新增点击图片全屏查看的需求,刚开始使用的方法能够做到,但是由于 jquery 的版本冲突,所以不得已换了现在的方法. <div class="add_photo" style="margin-top: 1000px;"

淘宝店铺装修全屏海报代码怎么用的设置方法

淘宝店铺装修全屏海报代码怎么用的设置方法 | 浏览:192 | 更新:2015-01-01 21:38 | 标签: 淘宝 1 2 3 4 5 6 分步阅读 百度经验:jingyan.baidu.com 淘宝c店1920全屏海报怎么做?代码怎么用高度如何修改? 用什么样的尺寸制作?如何设置和编辑,看图就知道怎么弄. 百度经验:jingyan.baidu.com 工具/原料 全屏代码 百度经验:jingyan.baidu.com 方法/步骤 1 打开记事本把这代码复制粘贴在内做准备,也可用直接店铺装

全屏背景:15个jQuery插件实现全屏背景图像或媒体

动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. 本综述我们列出15最好的jQuery全屏背景图像的插件,可以帮助你增加你的图像到您的网站,让他们看起来惊人的美丽.这个插件创建一些华丽的背景,幻灯片,你的网站让他们美丽的动画和过渡. 1. MaxImage maximage 2.0是一个全屏背景slideshow utilizes jQuery的插