body的背景

背景background-color:默认border-box

画布canvas

一块区域

背景background-color的画布的特点:(画布大于等于视口)

最小宽度视口宽度

最小高度视口高度

html元素的背景:

覆盖画布 body元素的背景颜色(推荐)

如果html元素有背景颜色,body背景颜色正常覆盖边框盒,否则,body背景颜色覆盖画布 画布设置背景图片(总结就相对html元素)

背景图宽度的百分比是相对于视口window.innerWidth

背景图的高度百分比相对于html元素的height(网页高度)

背景图的横向位置百分比,预设值,相对视口

背景图的纵向位置百分比,预设值,相对html的height(网页高度)

例子: html{ padding:10px; } body { width:1200px; border: 4px dashed red; background: url('../img/201801.png') no-repeat; background-size:50% 50%;//背景图width=视口宽度*50%;背景图高度height=html高度*50%; background-position:right 10px bottom 10px;//相对视口右边10px,相对html下边缘10px }

body的背景的更多相关文章

  1. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  2. 冒泡,setinterval,背景图的div绑定事件,匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  3. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  4. CSS 3学习——box-sizing和背景

    box-sizing 在CSS 2中设置元素的width和height仅仅是设置了元素内容区的宽和高,元素实际的尺寸是margin + border + padding + 内容区. CSS 3(截止 ...

  5. .NET同步与异步之相关背景知识(六)

    在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...

  6. Android—ListView条目背景为图片时,条目间距问题解决

    ListView是android开发中使用最普遍的控件了,可有的listView条目的内容颇为丰富,甚至为了美观,背景用指定图片,如下图:

  7. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  8. Atitit 动态按钮图片背景颜色与文字组合解决方案

    Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...

  9. 日常css技巧小结(1)--背景透明度改变对内容无影响

    刚开始出现的错误,内容会受到背景透明度改变的影响:如图: 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  10. C# 给PDF添加图片背景

    C# 给PDF添加图片背景 今天要实现的是给PDF文件添加图片背景这个功能.PDF是近年来最流行的文件之一,无论是办公还是日常生活中都经常会用到,很多时候,PDF文件的背景色都是白色,看多了难免觉得累 ...

随机推荐

  1. Object-C一日速成——环境搭建

    要我说,想要学习一门语言,搭建好相关的环境可以达到事半功倍的效果,那么今天我们就来聊一聊关于在windows系统上搭建Object-C语言编程环境的那些事. 文章目录 一.基于CodeBlocks的O ...

  2. React Hooks究竟是什么呢?

    摘要: React Hooks原理解析. 原文:快速了解 React Hooks 原理 译者:前端小智 我们大部分 React 类组件可以保存状态,而函数组件不能? 并且类组件具有生命周期,而函数组件 ...

  3. mac odoo 12 虚拟环境搭建及 依赖安装

    经过这几天的折腾,odoo 12 的虚拟环境总算搭建成了.网站有很多虚拟环境相关的搭建,但是都是写文章的自己清楚,但是文章里却描述不清楚. odoo 虚拟环境 这次搭建环境使用 odoo 12.0. ...

  4. [PHP] 内部接口简单加密验证方式

    1. 当有内部系统之间进行调用的时候,也需要简单的进行一下调用方的验证,一种简单的内部接口加密验证方式.此加密方式需要三个参数,分别是api地址,pin码,entry标识,其中pin和entry是接口 ...

  5. AtCoder - 2286 (数论——唯一分解定理)

    题意 求n!的因子数%1e9+7. 思路 由唯一分解定理,一个数可以拆成素数幂之积,即2^a * 3^b *……,n!=2*3*……*n,所以计算每个素因子在这些数中出现的总次数(直接对2~n素因子分 ...

  6. vue项目关闭eslint校验

    [前言] eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格.这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下 [主体] 简介eslint esl ...

  7. 关联规则 -- apriori 和 FPgrowth 的基本概念及基于python的算法实现

    apriori 使用Apriori算法进行关联分析 貌似网上给的代码是这个大牛写的 关联规则挖掘及Apriori实现购物推荐  老师 Apriori 的python算法实现 python实现关联规则  ...

  8. day80_10_29git冲突解决与短信服务redis

    一.开发中的操作. 在项目开发中,在工作区进行开发,开发结束后提交到本地版本库. 再拉取远程仓库,具体如下: """ 1.开发前,拉一次远程仓库 2.工作区进行开发 3. ...

  9. 鲜贝7.3--postman安装

    Postman电脑客户端安装: Postman的安装非常简单,在windows系统只需要双击安装包,然后什么都不需要操作,它直接就自己完成了,如下图.如果是mac 也是跟普通软件的安装方法相同.在初次 ...

  10. QTP10启动错误:Error creatingUnable to create configuration directory "C:UsersmR?ã? directory entry

    安装完之后打开就一直: 百度也不知道为哈子(莫非是中文的用户名?反正我不想重装系统),真是很气人. 我就直接创建了一个临时账户,登陆进去,就可以运行了: