.x{width100%} 所有class属性值为x的标签的宽度为100%
#x{width100%} 所有id属性值为x的标签的宽度为100%
##x{width100%} 错误的写法,不排除某一些浏览器也支持这种写法。
css定义背景图:--------------------------------------------------------------------------------------
background:背景颜色 url(背景图片路径及名字) 重复方式 对齐方式或精确位置
--------------------------------------------------------------------------------------
1.背景色:#123456、rgb(128,230,30)、red、blue,省略不写则为transparent(无背景色透明);
2.url():里面写 背景图片路径及名字,如:images/test.gif;可省略直接写为:
background:red(指定红色为背景色,没有图片背景)
3.重复方式:
no-repeat(任何方向都不重复)
repeat(x、y横竖方向都重复)
repeat-x(横向重复)
repeat-y(竖着重复);
不带此以上参数直接写作:
background:url(bg.jpg)
则上句效果等于下句:
background:url(bg.jpg) repeat
4.对齐方式:
用left、top、right、bottom、center定义背景图在元素中的显示位置;
一旦定义了url()背景图,该图片默认为在区块的左、上位置开始显示,即:
background:url(bg.jpg)等于 background:url(bg.jpg) left top
例子:
background:url(bg.jpg) no-repeat center bottom
上一行的意思是:背景图不重复,在元素横向的中间及竖向的底部开始显示
还有直接写数字方法精确定位背景图位置:
background:url(bg.jpg) no-repeat 10px 10px
意思是定一个背景图,不重复,从元素的0坐标(左上角)开始,横竖方向各位移10像素后开始显示
更多例子:
--------------------------------------------------------------------------------
background:url(bg.jpg)
什么参数都没跟,这个背景图会从左上角开始往横竖两个方向不断重复平铺显示
background:url(bg.jpg) no-repeat
加了no-repeat,意思是这张背景图不往任何方向重复重复,位置在左上角,等于:
background:url(bg.jpg) no-repeat left top
background:url(bg.jpg) no-repeat right bottom
背景图不重复,出现位置在区块的右边、底部
背景默认是出现在左边、顶部:
background:url(bg.jpg) no-repeat相当于:background:url(bg.jpg) no-repeat left top
background:url(bg.jpg) repeat-y
背景图y方向重复。即竖着重复,横向不重复
background:url(bg.jpg) repeat-x
跟上面相反,x横向重复,竖向不重复
background:url(bg.jpg) repeat
后面没跟-x或-y,就是横竖都重复,等同于默认情况:background:url(bg.jpg)
background:url(bg.jpg) repeat-y right
竖向重复,横向不重复,靠右对齐
明白了么:no-repeat right 不等于 repeat-y right
一个是背景图不重复,从右上角开始显示对齐
一个是背景图竖着重复,从右上角开始显示对齐