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

来源：互联网发布：js调用手机相册插件编辑：程序博客网时间：2024/05/01 03:29

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%; //这段也属于居中

注意：

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

5 0