CSS background汇总
所有背景属性都不能继承。
1. background-color
所有元素都能设置背景颜色。
background-color的默认值是transparent;也就是说,如果一个元素没有指定背景颜色,那么背景就是透明的,这样其祖先元素的背景才能可见。
2. background-image
所有元素都能设置背景图像;
背景图像可以设置多个,中间用逗号隔开;背景图像会层叠,写在前面的层次在上面。
3. background-repeat
repeat(默认)/no-repeat/repeat-x/ repeat-y
4. background-attachment
scroll(默认)/fixed
5. background-position
像素法:以图像左上角为起点,第一个值为水平移动的距离,第二个值为垂直移动的距离;若只规定一个值,第二个值默认为50%。
百分比法:百分比同时应用于图像和元素,相应的点重合进行定位。如果只指定一个百分数,意味着垂直方向为50%。
关键字法:top、right、bottom、left、center进行组合定位;若只规定一个值,第二个值默认为center。
注意:background-position可以为负值。
在默认情况下,背景颜色延伸到边框下面,背景图像在padding区域的左上角。
6. background-size
设置背景图像的尺寸;默认值为auto。
像素法:第一个值设置宽度,第二个值设置高度;若只有一个值,第二个值为auto。
百分比法:以父元素的宽度和高度以基准来计算。
关键字cover,不改变图像宽高比例,在水平和垂直方向都铺满整个元素,有可能导致一部分图像溢出。
关键字contain,不改变图像宽高比例,尽可能拉伸,直到某一方向铺满整个元素,有可能导致另一方向没有铺满。
7. background-origin
定义背景图像的初始位置
border-box,边框左上角。
padding-box,padding区域左上角;默认值。
content-box,内容区左上角。
8. background-clip
The CSS3 background-clip
property specifies the painting area of the background.
The property takes three different values:
- border-box - (default) the background is painted to the outside edge of the border
- padding-box - the background is painted to the outside edge of the padding
- content-box - the background is painted within the content box
(英文的解释得比较清楚)
(英文都是从W3Schools Online搬运)
关于background-origin和background-clip,它们是相互独立的,互不干扰。
关于background的CSS写法,个人认为应该逻辑明确、层次分明;具体而言:
background定义背景图像,background-color定义背景颜色,background-clip定义背景显示区域。
(个人见解,仅供参考)
Full Size Background Image
If we want to have a background image on a website that covers the entire browser window at all times.
The requirements are as follows:
- Fill the entire page with the image (no white space)
- Scale image as needed
- Center image on page
- Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:
html {
background: url(img_flower.jpg) no-repeat center fixed;
background-size: cover;
}
小tips:
利用背景图像的水平平铺,实现波浪式的边框效果。
(目前只有想法,还没找到符合需求的图像。)
CSS background汇总的更多相关文章
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- CSS 高级技巧汇总
在我们平时写代码的时候没有没有掌握一些CSS技巧呢? 今天给大家分享一个<CSS 高级技巧汇总让你的代码简洁高效>.大家务必掌握这些小技巧,会让你非常高效率的写出网页的. ◆使用 :not ...
- css优先级汇总
原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...
- CSS 技巧汇总
CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)=伪类选择符(:hover )=属性选择符([attr] ) ...
- CSS hack 汇总
1, IE条件注释法,微软官方推荐的hack方式. <!]> IE6以及IE6以上版本可识别 <![endif]--> <!]> 仅IE7可识别 <![end ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
- CSS background 属性 总结
CSS background 属性总结
- HTML CSS——background的认识(一)
今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...
- css background之设置图片为背景技巧
css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...
随机推荐
- 【MOOC EXP】Linux内核分析实验三报告
程涵 原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 [跟踪分析Linux内核的启动过程] ...
- JMeter学习笔记——认识JMeter(1)
拿到一个自动化测试工具,我们第一步就应该了解它能提供我们哪方面的功能(最直接的方法就是从官网获取),接下来就是简单的对这个工具进行“功能测试”了,当然这里的功能测试不是让你找它存在的bug,而是让自己 ...
- 八大排序算法的python实现
# -*- coding: utf-8 -*- # 冒泡排序 def bubble_sort(nums): i = 1 exchanged = True while i < len(nums) ...
- requestMapping设置客户端访问地址
- Linux_Centos7_设置MySql定时备份
一.查看是否安装了必要的组件 [root@localhost /]# rpm -qa | grep cron cronie-1.4.11-14.el7_2.1.x86_64 cronie-anacro ...
- linux课外命令
1.要知道linux是多少位的 在命令行输入 getconf LONG_BIT 返回32就是32位,返回64就是64位的. 2.CentOS-7-x86_64-DVD-1708.iso 这种代表64位 ...
- Vasya and Multisets CodeForces - 1051C(英语限制了我的想象力)
题意: 对输入的每个数都进行分配到两个多重集中,问分配完以后 每个多重集中的个数为1的元素是否相等 相等则输出一个分配方式, 不想等为NO 解析: 三种情况 1.原数列中个数为1 的数的个数为偶数 ...
- The Accomodation of Students HDU - 2444(判断二分图 + 二分匹配)
The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- 洛谷P3957 跳房子
普及组的题.....填坑来了. 当年的我一眼二分+DP,现在都佩服起自己来了...... 然后我们就写个二分,在check里面写单调队列优化DP即可. 然后就A了...... #include < ...
- acm 比赛模板
C++模板 A-M https://pan.baidu.com/s/1lqR1s5RcAR52UJLYNfmRTQ C++模板 1-13 https://pan.baidu.com/s/1361ShU ...