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:

CSS Code复制内容到剪贴板
  1. html {   
  2.      backgroundurl(img_flower.jpg) no-repeat center fixed;    
  3.      background-size: cover;   
  4.  }  

小tips:

利用背景图像的水平平铺,实现波浪式的边框效果。

(目前只有想法,还没找到符合需求的图像。)

以上这篇CSS background全部汇总就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phpstudy。



相关阅读:
CSS样式定义的优先级顺序介绍
js实现文本框选中的方法
详解对Linux内核进行升级的步骤
asp.net不用设置iis实现url重写 类似伪静态路由
Win7设置电源模式为高性能计划方法
Java4Android开发教程(四)java的变量
PHP+Javascript实现在线拍照功能实例
div图片marquee无缝连接实现代码
jQuery获取父元素及父节点的方法小结
微信随机生成红包金额算法java版
Linux中进程管理工具htop的安装与其命令使用教程
Java利用Sping框架编写RPC远程过程调用服务的教程
JavaScript使用二分查找算法在数组中查找数据的方法
Javascript的表单验证-揭开正则表达式的面纱
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 小学一年级作文1200字:乐天派——胖哥 一个人的寂寞,两个人的错 磕头 你的左手正牵着谁 我想不会是我 护理开题报告 你、我的别离时 我们爱你啊,柳州作文400字 壮乡的五色饭 桃花园里,我守你归来 路……在远方 悲伤天空下的梦作文1100字 荷叶作文450字 《野风车》读后感作文400字 冷酷到底 2016-2017学年第二学期高一班主任工作总结 春天的早晨作文600字 工商管理个人简历 走进花的海洋_200字 2013年寒假物价上涨情况调查报告 关于雨的伤感语录摘抄 我该怎么做回自己 2015公务员入党转正申请书 500字 幼儿园2015秋季新学期开学寄语 看漫画《看谁快》有感作文500字 一年级日记:停电作文250字 《有效地管理你的课堂》读后感 自我鉴定写作指南 蜡笔小新日语台词 自伤(风的自由) 元宵节祝福语,祝你快乐圆满! 真实故事:爱情是过去式还是未来式(巾帼、小萌) 来生在诉前缘-那夜星逝 吐作文200字 石猴记(6)作文1900字 风动情暖,爱洒心间 安安静静的进入梦乡 新龟兔比赛作文600字 我从来没有这样的运气 适应喜怒哀乐 关于爱国主义的演讲稿 在你的世界里不曾有我的影子 到月球上去种地读后感800字 这一刻,我想对你说 不同的我们 、同样的悲伤 奉献成就一代梦想 小学六年级作文550字:财富的应用与创新 2015的最后一场雪 阅读对我的影响250字 搞笑爱情短信 有关妈妈我想对你说的作文300字

Copyright © 2016 phpStudy |