HTML5学习_day01(5)--css常见样式background

background属性

为了方便测试 css直接卸载标签内

首先说明 width代表长度  height代表宽度

1.background-color:背景颜色填充

例如: 

<div style="width: 100px;height: 50px; background-color: aquamarine;"></div>

效果如下

有关颜色的写法 请按下面链接：

点击打开链接

2.background-image 设置背景图片（若图片大小与div大小一样就能变成背景  若小于div大小就会自动填充）

用法：

background-image: url(文件路径);

例如：

<div style="width: 400px;height: 200px; background-color: aquamarine;background-image: url(文件路径);"></div>

效果如下

3.background-repeat 设置图片是否自动填充

属性值：

1)不平铺：no-repeat

效果：

2)水平方向平铺:repeat-x

效果:

3)垂直方向平铺:repeat-y

4.设置图片是否滚动background-attachment

使用情况：

1）当页面滚定时 你想让图片固定在页面原来位置  不让图片因页面滚动而消失

2）当你图片设置网页的背景颜色时 就可以固定图片当做背景颜色 不因滚动而发生变化

属性值：

fixed:页面滚动时，图片固定在屏幕原本位置不动

scrol:跟着页面进行滚动(默认值)

background-attachment: fixed;

5.背景定位

背景定位  两个值:x,y

x:水平方向的对齐方式:left  center  right

y:垂直方向的对齐方式:top  center  bottom

background-position-x: 100px; /*距离左边100像素*/
background-position-y: bottom; /*放置到最下方*/

复合写等同于上方两条代码

background-position: 100px bottom;

<p class="p1">图片居中<span class="s1">(</span>注意<span class="s2">:</span>如果值设置x值<span class="s2">,</span> y默认居中<span class="s2">,</span>如果只写一个参数<span class="s2">,</span>默认另一个参数值相同<span class="s1">)</span>;</p>background-position: center; //这个相当于<strong style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></strong><pre name="code" class="html" style="display: inline !important;">background-position: center center;

background-position: 50% 50%; //这段也属于居中

注意：

如果用像素来固定图片居中,要计算图片长宽,因为像素固定的是图片左上方那个点的位置