全屏图片

背景图片：

方法一：

.bg { height: 100%; width:100%; background-image:url(‘images/index-bg.png‘) ;background-attachment:fixed;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;}
方法二：

.bg { background: url(‘images/index_bg.jpg‘) no-repeat   50% 50%;background-size: cover;padding-top:宽/高;}

图片：

适合纯色或者重复同样图案的背景图
.indexBg{z-index:-1;background-attachment:fixed;width:100%;height: 100%;position: fixed;top:0;left:0;bottom:0;right:0;_position: absolute;_top: expression(eval(document.body.scrollTop));_left: expression(eval(document.body.scrollLeft));}
.indexBg img {height:100%;width:100%;}

时间： 2024-10-13 08:29:37

全屏图片的相关文章

21款大气的全屏图片切换代码

html5全屏背景切换点击按钮svg背景滑动切换特效 jQuery全屏响应式手指滑动图片轮播代码 jquery商城网站全屏多张图片滑动切换代码 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 html5响应式全屏滚动图片切换幻灯片特效 jQuery全屏带进度条图片轮播特效 jQuery仿音悦台网站全屏带标题的焦点图轮播代码 jQuery背景和banner图片一起切换全屏焦点图切换代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 JQuery自适应全屏图片滚动鼠标上下滑动

基于jQuery带进度条全屏图片轮播代码

基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="pic"> <ul> <li style="background: url(images/bg1.jpg) center;"> <img src="images/con1.png"> <

一个简单的全屏图片上下打开显示网页效果

打包下载地址:http://download.csdn.net/detail/sweetsuzyhyf/7602105 上源码看效果: <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; padding: 0; } .wrap { overflow: hidden; position: fixed; z-index: 99999; width:

基于jQuery商城网站全屏图片切换代码

基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="slideInner"> <a href="#" style="background: url(img/slide1.jpg) no-repeat;"> <div cla

CentOS7下python3 selenium3 使用Chrome的无头浏览器 截取网页全屏图片

前言 selenium是一个模拟浏览器的自动化执行框架,但是如果每次执行都要打开浏览器来处理任务的话,效率上都不高.最重要的是如果安装在Centos7服务器环境下,打开浏览器来模拟操作是更加不合适的,尤其是碰上需要截取网页图片这样的需求. 这时候就要考虑使用Chrome的无头浏览器模式了.所谓的无头浏览器模式也就是不需要打开浏览器,但是却可以起到模拟打开浏览器的执行效果,一切无界面执行. 下面来看看如果安装部署到执行. 1.安装chrome 1.1 添加google的repo源 vim /etc

全屏图片上下打开

一个极简的小功能,有需要的可自行封装成插件,加入一些配置参数,例如延迟时间,展开时间,展开效果,回调函数,容器之类的. <!DOCTYPE html> <html> <head> <title></title> <style> body { margin: 0; padding: 0; } .wrap { overflow: hidden; position: fixed; z-index: 99999; width: 100%; t

jQuery全屏图片焦点图

在线演示 本地下载 原文地址:https://www.cnblogs.com/qixidi/p/10051351.html

HTML+css实现图片全屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏图片</title> <style> div#div1{ position:fixed; top:0; left:0; bottom:0; right:0; z-index:-1; } div#div1 > img { height:1

jquery简单的大背景banner图片全屏切换

详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上线不久,最近整理整理从前的一些小逼格的事 大背景全屏切换效果图:    大背景全屏切换效果html内容: <!--banner图片切换开始--><div class="banner"> <div class="block none">