CSS学习笔记(三)背景
2016-04-26 09:34
555 查看
CSS 背影相关属性效果:
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景图像是否及如何重复。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 设置背景图片的起始位置。
设置背景颜色小栗子:
设置背景图片小栗子:
background-repeat:设置一个指定的背景图像是否或如何铺排
小栗子:
背景相关简写方式:
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景图像是否及如何重复。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 设置背景图片的起始位置。
设置背景颜色小栗子:
<html> <head> <style> body{background-color:#60a21a} </style> </head> <body> <h3>我是标题,啊哈哈</h3> <p>你好,我是段落。在这样一个阴雨绵绵的日子里,我仅代表段落向标题say hello~</p> </body> </html>
设置背景图片小栗子:
<html> <head> <style> body{background-image:url('http://img.my.csdn.net/uploads/201603/29/1459237409_6607.jpg')} </style> </head> <body> <h3>我是标题</h3> <p>我是段落</p> </body> </html>
background-repeat:设置一个指定的背景图像是否或如何铺排
background | 简写属性,作用是将要设置的背景属性设置在一个声明中。 |
---|
属性值 | 作用 |
---|---|
repeat | 背景图像将在垂直方向和水平方向平铺。(默认值) |
repeat-x | 背景图像将在水平方向平铺。 |
repeat-y | 背景图像将在垂直方向平铺。 |
no-repeat | 背景图像不平铺。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置 |
<html> <head> <style> body{background-image:url('http://img.my.csdn.net/uploads/201604/26/1461631727_2209.jpg') ; background-repeat:repeat-x} </style> </head> <body> <h3>试试几种不同的repeat值:<b>repeat-x</b></h3> <p>整个body背景图片是以<b><span style="color:blue">水平</span></b>方向进行平铺</p> </body> </html>
<html> <head> <style> body{background-image:url('http://img.my.csdn.net/uploads/201604/26/1461631727_2209.jpg') ; background-repeat:repeat-y} </style> </head> <body> <h3>试试几种不同的repeat值:<b>repeat-y</b></h3> <p>整个body背景图片是以<b><span style="color:blue">垂直</span></b>方向进行平铺</p> </body> </html>
背景相关简写方式:
<html> <head> <style> body{background:url('http://img.my.csdn.net/uploads/201604/26/1461631727_2209.jpg') no-repeat left top;} </style> </head> <body> <h3>试试几种不同的repeat值:<b>repeat-y</b></h3> <p>整个body背景图片是以<b><span style="color:blue">垂直</span></b>方向进行平铺</p> </body> </html>
相关文章推荐
- css中为了清除浮动经常用到的after样式
- CSS伪元素和伪类
- {Less} is more, than Css
- css解决父元素高度塌陷
- 使用HTML和CSS制作下图界面(溢出)
- 标题栏模块溢出css效果
- [html]CSS 小贴士
- 获取盒子的实际位置
- maven工程如何引用css和js文件
- JS+CSS3人物奔跑动画
- 神奇的CSS技巧探秘——关于边框特效
- CSS布局注意(纯属个人总结)
- CSS代码实例:用CSS代码写出的各种形状图形
- CSS清除浮动大全共8种方法
- webstorm配置scss自动编译路径
- CSS
- getstyle() 获取样式
- CSS颜色值,长度值
- CSS&nbsp;3&nbsp;的动画功能
- CSS选择器