CSS背景样式使用

原创

徐的张 2022-11-11 12:52:45 博主文章分类：css ©著作权

文章标签 css html 背景图背景颜色 文章分类 运维

©著作权归作者所有：来自51CTO博客作者徐的张的原创作品，请联系作者获取转载授权，否则将追究法律责任

CSS背景样式使用_html

CSS背景样式使用_背景颜色_02

CSS背景样式使用_html_08

语法：

background-color : transparent | color

取值：

transparent	:	默认值。背景色透明
color	:	指定颜色。请参阅颜色单位和附录：颜色表

说明：

设置或检索对象的背景颜色。
当背景颜色与背景图像( background-image )都被设定了时，背景图片将覆盖于背景颜色之上。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundColor 。

CSS背景样式使用_html_09

语法：

background-image : none | url ( url )

取值：

none	:	默认值。无背景图
url ( url )	:	使用绝对或相对 url 地址指定背景图像

说明：

设置或检索对象的背景图像。
当背景图像与背景颜色( background-color )都被设定了时，背景图片将覆盖于背景颜色之上。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundImage

url为相对路径设置时容易出错要注意！！

CSS背景样式使用_css_10

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

取值：

repeat	:	默认值。背景图像在纵向和横向上平铺
no-repeat	:	背景图像不平铺
repeat-x	:	背景图像仅在横向上平铺
repeat-y	:	背景图像仅在纵向上平铺

说明：

设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image)。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundRepeat 。

CSS背景样式使用_背景颜色_11

语法：

background-position : length || length
background-position : position || position

取值：

length	:	百分数 \| 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position	:	top \| center \| bottom \| left \| center \| right

说明：

设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding)的内容区域的左上角。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center值，所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。

.html代码如下：

<!DOCTYPE HTML>
<html>
  <head>
    <title>字体样式用法</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
  </head>
  <body>
    <table width="50%" height="200px" border="1" align="center" cellspacing="0">
      <caption>大秦帝国基本信息</caption>
      <tr>
        <td>作者</td>
        <td>孙皓辉</td>
      </tr>
      <tr>
        <td>字数</td>
        <td>504万</td>
      </tr>
      <tr>
        <td>出版社</td>
        <td>中原出版传媒集团</td>
      </tr>
    </table>
    <p>
    一、大秦帝国是中国文明的正源。大秦帝国所处的时代是中国五千年文明史中最重要的一个时代。
不幸的是，作为统一帝国的短促与后来以儒家观念为核心的官方意识形态的刻意贬损，
秦帝国在“暴虐苛政”的恶名下几乎湮没在历史的沉沉烟雾之中。有限史料所显示的错讹断裂且不必论，
明清通俗小说《东周列国志》、《二十四史演义》等通俗史话作品，对秦帝国的描述更是鲁莽灭裂，
放肆亵渎，竟然将这段历史涂抹得狰狞可怖面目全非。这种荒诞的史观，非但是官方正统意识形态的形象化，
而且流布民间，形成了中国民众源远流长的“暴秦”口碑。事实上，对于酷爱说古道今的中国老百姓而言，
话本小说、评书戏剧、民间传说等对民众意识所起到的浸润奠基作用，远远大于晦涩难懂的史书。
两千年来，在对秦帝国的描绘评判中，旧的正统形态与旧的民间艺术异曲同工，或刻意贬损，或肆意涂抹，
悠悠岁月中竟是众口铄金，中国文明正源的万丈光焰竟然离奇得变形了。
  </p>
  <p>二、通常意义上，“帝国”是一个历史概念。它一般包含三个基本标准：
其一，统一辽阔的国土（小国家没有帝国）；
其二，专制统治（民主制没有帝国）；
其三，强大的军事扩张（无扩张不成帝国）。
秦在这三个方面都表现得极为鲜明，可算是典型的古典帝国，而不是一个普通的王朝。
  </p>  
  </body>
</html>

.css代码如下：

*{font-family:"宋体"}
a{text-decoration:none}
p{line-height:26px;letter-spacing:0.1em;text-indent:1cm;direction:ltr}
table{
text-align:center;
background-color:#ffbbaa;
background-image:url(../images/bg.gif);//注意
background-repeat:no-repeat;
background-position:50%
}

显示如下：

CSS背景样式使用_背景颜色_12