HTML5学习_day01(5)--css常见样式background
2016-09-20 19:18
691 查看
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%; //这段也属于居中注意:
如果用像素来固定图片居中,要计算图片长宽,因为像素固定的是图片左上方那个点的位置
相关文章推荐
- HTML5学习_day01(7)--css常用文本样式
- HTML5学习_day01(4)--css内部样式之选择器
- 蓝鸥零基础学习HTML5第六讲 CSS的常见样式
- 蓝鸥零基础学习HTML5第四讲 CSS的基础样式
- 蓝鸥零基础学习HTML5第五讲 CSS的基础样式
- 【HTML5学习笔记】26:CSS其它样式
- 蓝鸥零基础学习HTML5第五讲 CSS的基础样式
- CSS学习笔记 -- day01 CSS简介、常见属性、基础选择器
- 从零开始前端学习[9]:css中的背景样式background的使用
- 【HTML5学习笔记】19:CSS文本样式 上
- 蓝鸥零基础学习HTML5之CSS的基础样式一
- CSS3+Html5 学习笔记之css 样式加载顺序
- 蓝鸥零基础学习HTML5第四讲 CSS的基础样式
- h5学习之3(h5的常用选择器和css常见样式)
- 【HTML5学习笔记】20:CSS文本样式 下
- html5-CSS学习-background记录
- 蓝鸥零基础学习HTML5之CSS的基础样式二
- CSS常见错误集锦(1)-关于外部样式表中background-image:url()的设置
- HTML5学习笔记(六):CSS基本样式
- CSS学习系列五:字体样式