h5背景
1、背景属性复习: background-image background-color background-repeat background-position background-attachment
2、新增属性: background-size: background-size:x y; // 水平 垂直方向的尺寸,像素/百分比/auto/⋯ background-size:cover; //保持宽高比不变,保证占满盒子,但不保证能看到全部 background-size:contain; //保持宽高比不变,保证看清全图,但可能占不满盒子
多背景: background-image:url(1.jpg),url(2.jpg);
background-origin 背景区域定位 border-box: 从border区域开始显示背景 padding-box: 从padding区域开始显示背景 content-box: 从content内容区域开始显示背景
background-clip 背景绘制区域 border-box: 从border区域开始绘制背景 padding-box: 从padding区域开始绘制背景 content-box: 从content内容区域开始显示背景
3、背景练习:
<!DOCTYPE HTML>
<html>
<head>
<title>your title name</title>
<meta charset="utf-8">
<meta name="Author" content="Wilson Xu">
<style type="text/css">
*{margin: 0;padding: 0;font-family: "Microsoft yahei";}
a{text-decoration: none;}
a img{display: block;border: none;}
li{list-style: none;}
.container{
width: 1200px;
padding: 20px;
margin: 10px auto;
border: 1px dashed #ccc;
}
.container h4{padding-bottom: 5px;}
.container ul{
width: 1200px;
overflow: hidden;
}
.container ul li{
float: left;
width: 331px;
padding: 20px;
height: 240px;
margin-right: 10px;
border: 10px solid rgba(10,10,10,.3);
background: url('images/1.jpg') no-repeat;
background-size: 371px auto;
}
.container ul li:last-child{margin-right: 0;}
.container ul.origin li:nth-child(1){
background-origin: border-box;
}
.container ul.origin li:nth-child(2){
background-origin: padding-box;
}
.container ul.origin li:nth-child(3){
background-origin: content-box;
}
.container ul.clip li:nth-child(1){
background-clip: border-box;
}
.container ul.clip li:nth-child(2){
background-clip: padding-box;
}
.container ul.clip li:nth-child(3){
background-clip: content-box;
}
section .pic{
width: 600px;
height: 400px;
margin: 20px auto;
border: 1px dashed #ddd;
background: url('images/3.jpg') no-repeat center center/auto 200px, url('images/2.jpg') no-repeat center center/auto 300px, url('images/1.jpg') no-repeat center center/auto 400px;
}
section p{
font-size: 14px;
color: #f01010;
}
</style>
</head>
<body>
<div class="container">
<section>
<h4>1、background-origin: border-box | padding-box | content-box</h4>
<ul class="origin">
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section>
<h4 style="margin-top: 20px;border-top: 1px dashed #ccc;">2、background-clip: border-box | padding-box | content-box</h4>
<ul class="clip">
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section>
<h4 style="margin-top: 20px;border-top: 1px dashed #ccc;">3、多背景:background: url('images/3.jpg') no-repeat center center/auto 200px, url('images/2.jpg') no-repeat center center/auto 300px, url('images/1.jpg') no-repeat center center/auto 400px;
</h4>
<div class="pic"></div>
<p>注释:复合写background-size的时候,一定要用/与其他值隔开。</p>
</section>
</div>
</body>
</html>
练习代码部分:
h5背景的更多相关文章
- H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法 方法1: <style> body{ background:url(beij ...
- Bootstrap优秀模板-Unify.2.6.2
这是一个非常老牌的Bootstrap商业模板,全面性和稳定性俱佳,有LandingPage.BussinessPage.AdminPage多种模式,非常推荐用来构建官网.响应式应用Web.管理端Web ...
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...
- 安卓微信端打开H5页面背景图被键盘挤压移动位置解决
问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导 ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- 解决H5页面点击一瞬间出现灰色背景的问题
H5页面有时会出现点击一瞬间出现灰色背景的问题(ios会,安卓不会),解决方法: 加上样式: -webkit-tap-highlight-color: transparent; 如果以上方法不行,则是 ...
- 如何利用h5将视频设置为背景
我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步 第一步:准备工作 工欲善其事必先利其器,我们首先 ...
- 【简抄】h5 新增的几个背景属性和文本属性
一.背景图像显示: ①background-size:规定背景图像的大小: 值:像素值.百分比.auto.cover.contain ②background-origin :规定背景图像的起始位置: ...
- 最全面的H5的背景音效素材(经过实践),分享给你!!!
个人内心独白: 这两天在为一个H5的页面寻找一些相关音效,茫茫的网络,辣么大,真是想法设法翻遍你,不说废话了,看总结吧哦 方法总结(这才是重点,看这里): 1.如果是部分铃声截取的,我们可以来到铃声之 ...
随机推荐
- cf B. Black Square
B. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- Vbox下创建Linux和Windows的共享文件夹
我的Vbox版本是4.3.6...在这里以win8和Ubuntu12.04之间共享文件举例 首先运行虚拟机,然后安装增强功能..这个增强功能很碉堡...能开启无缝模式和系统间的剪贴板共享等牛X功能 然 ...
- 【Nginx从入门到实战】
目录 1. 网站服务 2. 所谓Nginx 3. 安装Nginx 4. Nginx配置文件详述 5. 开始玩转Nginx Nginx虚拟主机 Nginx状态信息(status)配置 Nginx错误页面 ...
- 直接修改Android软件数据库来改变软件设置实例一则
昨天把K860i刷了机,刷到了最新的CyanogenMod 10.1,使用起来各种流畅舒服,不过却由于内外置SD卡的挂载点的改变,造成了一些困扰,现记录如下. 平时里由于极少把手机连接 ...
- ttf字体转换成web中使用的woff、svg、eot格式字体
网站地址:http://www.fontsquirrel.com/tools/webfont-generator(还可以缩小字体文件大小,强烈推荐) ttf转换成eot格式的字体软件:EOTFAST. ...
- SFML学习纪要
工作需要,近段粗浅看了一下SFML,记录一下! 一.浅见概述 SFML,simple and Fast mulitmedia Library官方网站:http://www.sfml-dev.org/i ...
- 【例题 7-11 UVA - 12325】Zombie's Treasure Chest
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 1.N/s1 < 1e6 枚举1的个数 2.N/s2<1e6 枚举2的个数 3.s1和s2的值较小 假设买了s2个1和s ...
- Android底层驱动开发(一)
1 Android为什么要增加硬件抽象层HAL A 统一硬件调用接口.所以利用HAL屏蔽linux驱动的复杂不统一的接口 B 解决GPL版权问题,因为linux内核基于GPL协议.这个G ...
- 最简单的基于FFmpeg的移动端样例:Android 视频转码器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- Dojo Chart之经常使用统计图
非常多做web的都知道,在非常多web系统中会涉及到一些统计图.比如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都非常熟悉的,jquery的highcharts就能搞定全部的涉及到统计图 ...