网站开发需要会的东西,荆门网站建设公司,郑州市房产信息网官方网站,手机网站一键导航代码CSS 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 背景属性
Property描述background简写属性#xff0c;作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把…CSS 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 背景属性
Property描述background简写属性作用是将背景属性设置在一个声明中。background-attachment背景图像是否固定或者随着页面的其余部分滚动。background-color设置元素的背景颜色。background-image把图像设置为背景。background-position设置背景图像的起始位置。background-repeat设置背景图像是否及如何重复。
看到这个表你在理解的同时可能在思考这该怎么用啊首先要用到我们前面所总结的我在这里再把那个图拿过来 尽管这看起来比前面的有一些复杂同时可能理解这些属性也需要一段时间但是其实这些属性本质还是要服从CSS的语法原则使用的对象也还是对应的HTML元素。
接下来让我们详细了解一下每一个属性
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中
接下来我们看一个例子
!DOCTYPE html
html
head
meta charsetutf-8
title示例/title
style
body
{background-color:#b0c4de;
}
/style
/headbodyh1我的 CSS web 页!/h1
p你好世界/p/body
/html
运行结果的展现就是页面颜色都变化了
那么很明显这个使用又涉及到了HTML中的内容颜色颜色有哪一些如何引用如果大家不熟悉可以看看这篇博客这是我总结的有关于HTML颜色的内容
HTML颜色http://t.csdnimg.cn/UTaKr
CSS中颜色值通常以以下方式定义:
十六进制 - 如#ff0000
RGB - 如rgb(255,0,0)
颜色名称 - 如red
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色
!DOCTYPE html
html
head
meta charsetutf-8
title示例/title
style
h1
{background-color:#6495ed;
}
p
{background-color:#e0ffff;
}
div
{background-color:#b0c4de;
}
/style
/headbodyh1CSS background-color 实例!/h1
div
该文本插入在 div 元素中。
p该段落有自己的背景颜色。/p
我们仍然在同一个 div 中。
/div/body
/html
运行结果
背景图像
background-image 属性描述了元素的背景图像.
默认情况下背景图像进行平铺重复显示以覆盖整个元素实体.
示例
!DOCTYPE html
html
head
meta charsetutf-8
title示例/title
style
body
{background-image:url(paper.gif);background-color:#cccccc;
}
/style
/headbody
h1Hello World!/h1
/body/html
运行结果 背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺这样看起来很不协调
比如像这种的
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好
示例
!DOCTYPE html
html
head
meta charsetutf-8
title示例/title
style
body
{background-image:url(gradient2.png);background-repeat:repeat-x;
}
/style
/headbody
h1Hello World!/h1
/body/html
运行结果 有的图像只在垂直方向平铺 (repeat-y), 页面背景会更好和在水平方向上平铺用法一样这里就不演示了
背景图像- 设置定位与不平铺
background-repeat:no-repeat; 有时候背景图像过多会影响文本的排版
如果你不想让图像平铺你可以使用 background-repeat 属性为什么是这个属性呢其实平铺不就是重复吗repeat是重复的意思设置不让重复就不会一直平铺下去了
示例
!DOCTYPE html
html
head
meta charsetutf-8
title例子/title
style
body
{background-image:url(img_tree.png);background-repeat:no-repeat;
}
/style
/headbody
h1Hello World!/h1
prunoob 背景图片实例。/p
p背景图片只显示一次,但它打扰到读者!/p
/body/html
运行结果 其中例子里面图片的路径根据你所引用的图片具体路径书写有时候图片不显示是因为路径的错误这也是以后写页面遇到图片不显示一个查错的方向
背景图像与文本显示在同一个位置为了让页面排版更加合理不影响文本的阅读我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置
background-position
比如background-position:right top; 在右上方的意思其他的大家可以参考着写比如
background-position: left top;
这个我验证的时候发现一个现象我写bottom树的位置是最高的top树的位置在中间而top的时候树的位置是最低的,目前我还不知道原因哈哈
示例
!DOCTYPE html
html
head
meta charsetutf-8
title示例/title
style
body
{background-image:url(https://static.jyshare.com/images/mix/img_tree.png);background-repeat:no-repeat;background-position:right top;margin-right:200px;
}
/style/headbody
h1Hello World!/h1
p背景图片不重复设置 position 实例。/p
p背景图片只显示一次并与文本分开。/p
p实例中还添加了 margin-right 属性用于让文本与图片间隔开。/p
/body/html
运行结果 背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 background
示例
body {background:#ffffff url(img_tree.png) no-repeat right top;}
当使用简写属性时属性值的顺序为:
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用你可以按照页面的实际需要使用.但是一定要按照先后顺序
接下来给大家讲一个有意思的让背景图片固定不动
只需要 background-attachment:fixed; 就可以了
用法和上面的属性一样
