body的背景
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的背景的更多相关文章
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- 冒泡,setinterval,背景图的div绑定事件,匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- CSS 3学习——box-sizing和背景
box-sizing 在CSS 2中设置元素的width和height仅仅是设置了元素内容区的宽和高,元素实际的尺寸是margin + border + padding + 内容区. CSS 3(截止 ...
- .NET同步与异步之相关背景知识(六)
在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...
- Android—ListView条目背景为图片时,条目间距问题解决
ListView是android开发中使用最普遍的控件了,可有的listView条目的内容颇为丰富,甚至为了美观,背景用指定图片,如下图:
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案 转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标 文字分拆,使用字 ...
- 日常css技巧小结(1)--背景透明度改变对内容无影响
刚开始出现的错误,内容会受到背景透明度改变的影响:如图: 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- C# 给PDF添加图片背景
C# 给PDF添加图片背景 今天要实现的是给PDF文件添加图片背景这个功能.PDF是近年来最流行的文件之一,无论是办公还是日常生活中都经常会用到,很多时候,PDF文件的背景色都是白色,看多了难免觉得累 ...
随机推荐
- MD5 加密工具类MD5Util
我们在使用MD5 在线加密的时候,会发现下面情况,大小写的区别就不说啦,那么16位和32位有啥区别呢,其实16 位实际上是从 32 位字符串中,取中间的第 9 位到第 24 位的部分,就是str.su ...
- Django和前端用ajax传输json等数据
需要传输的是下图中所有的input中客户端设置的数据 整个页面是用js生成,代码不长,但是用了许多拼接,看起来开比较乱,页面的核心就是下面的部分,有一些关键参数部分就不放了,可以跳过这个 下面开始重点 ...
- Python单元测试工具doctest和unittest
Python标准库包含两个测试工具. doctest:一个简单的模块,为检查文档而设计,但也适合用来编写单元测试. unittest:一个通用的测试框架. 一.使用doctest进行单元测试 创建文件 ...
- 微信小程序如何使用 Git 实现版本管理和协作开发
前言 在微信小程序开发的过程中,代码版本管理往往需要使用第三方工具进行管理.虽然微信Web开发工具提供了对Git文件版本状态的提示,但实际的使用体验依然不尽人意. 随着微信Web开发工具的更新,最新的 ...
- C学习笔记(3)---作用域,数组, (少量指针入门)
1. 作用域(scope):任何一种编程中,作用域是程序中定义的变量所存在的区域,超过该区域变量就不能被访问.C 语言中有三个地方可以声明变量. a. 在函数或块内部的局部变量 - 在某个函数或块的内 ...
- 博客美化——Silence主题皮肤
介绍 一款专注阅读的博客园主题,主要面向于经常混迹 博客园 的朋友.其追求大道至简的终极真理,界面追求简洁.运行追求高效.部署追求简单. 博客皮肤源码地址 预览地址 如何部署.使用皮肤 Silen ...
- SpringBoot2.x项目pom.xml第一行报错
原来使用的是2.1.4 后来改成2.1.3 保存自动从新下载就好了 毕竟使用人数多 maven地址:https://mvnrepository.com/artifact/org.springfr ...
- 药店商品销量分析(python)
一.数据分析的步骤 二.提出问题 分析药店商品销售情况 1)月均消费次数 2)月均消费金额 3)客单价 4)消费趋势 5)热销商品.滞销商品 三.理解数据 销售数据源为excel文件 字段的含义: 共 ...
- 群体遗传之ped格式
1.PED简介 PED文件格式是广泛使用的用于连锁系谱数据分析的格式,并用作plink程序的输入.PLINK是一个免费的,开源的全基因组关联分析工集,旨在以高计算效率的方式执行一系列基本的,大规模的分 ...
- Paper | One-to-Many Network for Visually Pleasing Compression Artifacts Reduction
目录 故事 网络设计 网络前端 升采样中的平移-均值化 网络度量 训练 发表于2017年CVPR. 目标:JPEG图像去压缩失真. 主要内容: 同时使用感知损失.对抗损失和JPEG损失(已知量化间隔, ...