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文件的背景色都是白色,看多了难免觉得累 ...
随机推荐
- qt 使用OpenCV
使用MinGW编译OpenCV源码 下载OpenCV源码.CMake编译工具 编译安装完: Qt工程配置 INCLUDEPATH += D:/qt_work/opencv/build/install/ ...
- RSA 非对称加密算法的Java实现
关于RSA的介绍Google一下很多,这里不做说明.项目开发中一般会把公钥放在本地进行加密,服务端通过私钥进行解密.Android项目开发中要用到这个加密算法,总结后实现如下: import andr ...
- [b0038] python 归纳 (二三)_多进程数据共享和同步_队列Queue
1 队列读写 # -*- coding: utf-8 -*- """ 多进程 共享 队列 multiprocessing.Process 逻辑: 一个进程往队列写数据, ...
- 去掉没用的参数的warning
#define UNUSED(x) ((void)(x)) void fun(int noused_arg, int b){ UNUSED(noused_arg); printf("%d\n ...
- linux远程Windows服务器
Rdesktop -f ip 端口 Ctrl+alt+enter退出全屏
- Pycharm创建Django项目
1. 点击菜单栏的File--->New Project 2. 打开Terminal, 进入刚刚创建的路径执行如下命令: python manage.py startapp app01 显示效果 ...
- Vue+cordova开发App
Vue+cordova开发App https://www.imooc.com/article/70062
- ini_set()
ini_set ( string $varname , string $newvalue ) : string 设置指定配置选项的值.这个选项会在脚本运行时保持新的值,并在脚本结束时恢复. 参数 va ...
- Moving x86 assembly to 64-bit (x86-64)
While 64-bit x86 processors have now been on the market for more than 5 years, software support is o ...
- Linux学习笔记-第13天 最近有点跟不上节奏阿
难度上来了.最近工作也忙起来了..有点跟不上节奏.加油吧