它的组合写法:
background-color, background-image, background-repeat,backgroundattachment, background-position。
示例写法:body {background:#000 url(../images/图片路径) no-repeat fixed 5px 10px;}
background:5个子属性
第一个是颜色,没得说。
第二个是图片,后面的子属性都是对此子属性的约束
第三个是repaeat 重复
第四个是attachment 固定
第五个是position 位置
没有图片的情况就不说了,看一下有图片的情况。
子属性repeat.
div#bg
{
width:400px;
height:400px;
border:RED solid 2px;
/*背景*/
background: URL("small.jpg") ;
}
看看效果图:
在上面的CSS代码中根本没有对重复进行设置,结果有了水平方向和竖直方向的重复现象 ,说明子属性background-repeat的默认值是repeat-both.下面是设置repeat-x的效果和repeat-y的效果:
子属性position.
使用方法是设置左边距离和顶部距离,都是相对于元素的边框的。下面是设置background: URL("small.jpg") no-repeat 23px 23px;的效果:
看到背景图片的位置不在最左上角了,默认是在最左上角的。
子属性attachment。
这个很有效果感,做出的效果很是个性。一个例子是ebey。background: URL("small.jpg") fixed ;
好像是这么个情况:设置div的background的fixed子属性后,div变成了一个罩子,它到哪里,背景就显示到哪里,背景在整个窗口区域都存在的样子。设想有另一个DIV也有一个背景图片,也设置fixed的话,那么也会有此效果,这或许就是ebey页面中的效果吧。
attachment对position的影响:
设置属性:background: URL("small.jpg") no-repeat fixed 34px 34px ;结果是背景图片看不到了。当把fixed修改为scroll时,图片又出现了。这是为什么呢?
原来,fixed是指背景图片的位置相对于浏览器客户区。scroll是指图片的位置相对于div的内边框。所以一般设置fixed时一般不要设置no-repeat。
JS
object.style.backgroundColor
CSS--background的更多相关文章
-
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属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...
-
CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
-
CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
-
[CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
-
css background之设置图片为背景技巧
原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...
-
css background transparent All In One
css background transparent All In One opacity ul { max-height: 100px; /* max-height: 187px; */ overf ...
-
css &; background &; svg
css & background & svg https://developer.mozilla.org/en-US/docs/Web/CSS/background backgroun ...
随机推荐
-
【codeforces 442B】 Andrey and Problem
http://codeforces.com/problemset/problem/442/B (题目链接) 题意 n个人,每个人有p[i]的概率出一道题.问如何选择其中s个人使得这些人正好只出1道题的 ...
- yii框架分页
-
Spring3.0.6定时任务
项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...
-
BZOJ 3122 随机数生成器
http://www.lydsy.com/JudgeOnline/problem.php?id=3122 题意:给出p,a,b,x1,t 已知xn=a*xn-1+b%p,求最小的n令xn=t 首先,若 ...
-
AOP之拦截函数调用链实现
AOP之拦截函数调用链实现 定义函数A,B,C,调用A->B->C,这样就形成了函数静态调用链,而AOP要做的是能动态的添加多个B,形成A->B1->B2->B3...- ...
-
jenkins简单安装及配置(Windows环境)
jenkins是一款跨平台的持续集成和持续交付.基于Java开发的开源软件,提供任务构建,持续集成监控的功能,可以使开发测试人员更方便的构建软件项目,提高工作效率. Windows平台下,一般安装方法 ...
-
Spring MVC中Controller返回值void时报错
Controller如下: 当使用url访问该处理器方法时,报错如下: 26-Jan-2019 21:16:28.105 警告 [http-nio-8080-exec-39] org.springfr ...
-
关于struts.xml配置文件的说明
<struts> <!-- action: 对应controller 中的类的 name: 匹配url要访问的类 class:包名+类名 通过反射产生对象 method:指定默认访问 ...
-
POJ3690 Constellations
嘟嘟嘟 哈希 刚开始我一直在想二维哈希,但发现如果还是按行列枚举的话会破坏子矩阵的性质.也就是说,这个哈希只能维护一维的子区间的哈希值. 所以我就开了个二维数组\(has_{i, j}\)表示原矩阵\ ...
-
Python零基础学习系列之四--Python程序设计思想
前面我们把Python环境安装成功,同时也选择了自己合适的IDE工具来开启自己的编程之旅. 那么今天来说说怎么编程,程序设计需要什么步骤,我们应该怎么做才能编写自己的程序. 1-1.程序设计方法: I ...