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. 登录界面storyboard的一种布局方法

    布局思想:三个大点的背景视图宽高相等间距一定(30),左右距父视图距离一定(50),则宽度确定,水平方向位置确定 竖直方向:高度与宽度成一定比例,上边距父视图距离一定,竖直方向的位置和大小也确定了.输 ...

  2. 机器视觉-python基础入门

    下载安装python版本 https://www.python.org/ 安装并且勾上为添加系统环境 然后进入cmd命令行里进行 这时候装成功了 然后装opencv依赖库 pip install  o ...

  3. 爬虫---爬取b站小视频

    前面通过python爬虫爬取过图片,文字,今天我们一起爬取下b站的小视频,其实呢,测试过程中需要用到视频文件,找了几个网站下载,都需要会员什么的,直接写一篇爬虫爬取视频~~~ 分析b站小视频 1.进入 ...

  4. Excel调换数据位置

    选择需要调换位置的项,按住Shift键,拖动数据,移动到BC列中间线处,出现C4:C5时,放开键盘鼠标即可: 若是不按住Shift键,则数据移动到C列:

  5. LVS基本知识

      前言  linux集群类型  LB -->负载均衡集群(Load Balancing) HA-->高可用集群(High Availiablity) HP-->高性性集群(High ...

  6. 各版本mysql修改root密码

    今天在安装mysql5.7.8的时候遇到一些问题,首当其冲便的是初始root密码的变更,特分享解决方法如下: 1.mysql5.7会生成一个初始化密码,而在之前的版本首次登陆不需要登录. shell& ...

  7. zz高精地图和定位在自动驾驶的应用

    本次分享聚焦于高精地图在自动驾驶中的应用,主要分为以下两部分: 1. 高精地图 High Definition Map 拓扑地图 Topological Map / Road Graph 3D栅格地图 ...

  8. Python 对象比较(is & ==)

    Python 对象有 3 要素 id type value id 对象在内存中的地址 可以通过 id() 获取 比较 只有同一个对象 id 才会相同 id 通过 is 比较 示例: a = list( ...

  9. Python socket & socket server

    socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket(套接字). 建立网络通信连接至少要一对socket.socket是对TCP/IP的封装 使用方法 ...

  10. Django signal(信号)

    Django中提供了"信号调度",用于在框架执行操作时解耦,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. Django 内置信号 Model signals pr ...