大内高手社区

标题: CSS背景设计及实现方法 [打印本页]

作者: 程序员007 时间: 2021-9-26 10:16
标题: CSS背景设计及实现方法
　　CSS背景属性用于定义HTML元素的背景。
　　CSS属性定义背景效果:

[CSS] 纯文本查看 复制代码

background-color

background-image

background-repeat

background-attachment

background-position

[attach]56[/attach]

（图片来源于公开网络，若涉及侵权联系尽快删除！）

　　一、背景颜色
　　background-color属性定义了元素的背景颜色.
　　页面的背景颜色使用在body的选择器中:
　　实例
　　

[CSS] 纯文本查看 复制代码

body {background-color:#b0c4de;}

　　CSS中，颜色值通常以以下方式定义:
　　十六进制-如："#ff0000"
　　RGB-如："rgb(255,0,0)"
　　颜色名称-如："red"
　　以下实例中,h1,p,和div元素拥有不同的背景颜色:
　　实例

[CSS] 纯文本查看 复制代码

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

　　二、背景图像
　　background-image属性描述了元素的背景图像.
　　默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
　　页面背景图片设置实例:
　　实例
　

[CSS] 纯文本查看 复制代码

body {background-image:url('paper.gif');}

　　下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:
　　实例

[CSS] 纯文本查看 复制代码

body {background-image:url('bgdesert.jpg');}

　　三、背景图像-水平或垂直平铺
　　默认情况下background-image属性会在页面的水平或者垂直方向平铺。
　　一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
　　实例

[CSS] 纯文本查看 复制代码

body

{

background-image:url('gradient2.png');

}

　　如果图像只在水平方向平铺(repeat-x),页面背景会更好些:
　　实例

[CSS] 纯文本查看 复制代码

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

　　四、背景图像-设置定位与不平铺
　　如果你不想让图像平铺，你可以使用background-repeat属性:
　　实例

[CSS] 纯文本查看 复制代码

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

}

　　以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
　　可以利用background-position属性改变图像在背景中的位置:
　　实例

[CSS] 纯文本查看 复制代码

body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:right top;

}

　　五、背景-简写属性
　　在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
　　为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
　　背景颜色的简写属性为"background":
　　实例
　　

[CSS] 纯文本查看 复制代码

body {background:#ffffff url('img_tree.png') no-repeat right top;}

　　当使用简写属性时，属性值的顺序为：:

[CSS] 纯文本查看 复制代码

background-color

background-image

background-repeat

background-attachment

background-position

　　以上属性无需全部使用，你可以按照页面的实际需要使用.

作者: 半糖不加冰 时间: 2021-9-26 17:36
收藏啦~以后再用CSS修改背景不愁啦！

欢迎光临大内高手社区 (http://bbs.tedu.cn/)