基于html5背景图片自适应代码
基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片。效果图如下:
实现的代码。
css代码:
.jawbone-hero .jawbone-hero-image {
position:absolute;
background:transparent none no-repeat scroll 50% 0;
background-size:cover;
top:;
bottom:;
left:;
right:;
width:100%;
margin:0 auto;
z-index:-1
}
.jawbone-hero {
height:100%;
min-height:550px
}
.jawbone-hero .jawbone-hero-image {
position:fixed
}
#h1.jawbone-takeover-minimulti .jawbone-hero-image {
background-image:url(../images/hero-600.jpg)
}
@media (min-width: 600px) {
#h1.jawbone-takeover-minimulti .jawbone-hero-image {
background-image:url(../images/hero-1280.jpg)
}
}@media (min-width: 1016px) {
#h1.jawbone-takeover-minimulti .jawbone-hero-image {
background-image:url(../images/hero-2000.jpg)
}
via:http://www.w2bc.com/Article/40891
基于html5背景图片自适应代码的更多相关文章
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- bootstrop设置背景图片自适应屏幕
如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类
此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...
- 基于HTML5多图片Ajax上传可预览
html5多图控件<input id="fileImage" type="file" size="30" name="fil ...
- css 背景图片自适应元素大小
一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...
随机推荐
- ceph-RGW Jewel版新概念
一.概述 zone: 包含多个RGW实例的一个逻辑概念.zone不能跨集群,同一个zone的数据保存在同一组pool中: zonegroup:一个zonegroup如果包含一个或多个zone,如果包含 ...
- mvc area出现“找到多个与名为“Home”的控制器匹配的类型”错误的解决方法
出现该问题的原因是在默认的Golbal.asax.cs文件中已经注册了默认路由 public class MvcApplication : System.Web.HttpApplication ...
- 【HTML】前端性能优化之CDN和WPO的比较
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题.WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器 ...
- numpy ndarray可用的常规函数
该部分位于numpy - ref - 1.14.5中的2.8 available ufuncs 1 数学运算 1.1 元素级加法 add 加法规则: numpy.add(x1, x2, /, out= ...
- dbms_monitor开启/关闭会话跟踪
从10g开始,可以使用dbms_monitor开启/关闭会话跟踪. sql> desc dbms_monitor procedure client_id_stat_disable argumen ...
- C++ STL vector(向量容器)的使用(附完整程序代码)
一.简单介绍 Vectors 包括着一系列连续存储的元素,其行为和数组类似. 訪问Vector中的随意元素或从末尾加入元素都能够在O(1)内完毕,而查找特定值的元素所处的位置或是在Vector中插入元 ...
- go包管理工具glide
一.命令 安装 $ go get github.com/Masterminds/glide $ go install github.com/Masterminds/glide 初始化项目并在当前项目下 ...
- vim的全局替换[zz]&把字符替换成回车
本文出自 http://blog.csdn.net/shuangde800 本文是在学习<使用vi编辑器, Lamb & Robbins编著>时在所记的笔记. 本文内容 ...
- html与表格(table)相关的属性
<table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义 ...
- 使用maven生成可执行的jar包
从pom的xsi中可以打开描述pom的schema: 可以看到pom中,project的结构: 默认的mvn install生成的jar是不带主类入口的,需要在maven-compile-plugin ...