背景样式的使用-CSS入门基础（013）

最新推荐文章于 2024-01-08 10:05:55 发布

虾米大王

最新推荐文章于 2024-01-08 10:05:55 发布

阅读量348

点赞数

分类专栏： CSS 文章标签： html5 html css css3 javascript

本文链接：https://blog.csdn.net/modern358/article/details/111397666

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们分享关于背景样式的内容。

在css中，背景样式主要有两种：背景颜色和背景图像。在传统的web 1.0时代中，一般都是使用元素的backgroud属性，来为body、table和td等少数的标签定义背景图像。

在web 2.0时代，主要是使用css的background属性来定义。

背景图像：

背景图像的属性
属性	说明
background-image	定义背景图像的路径
background-repeat	定义背景图像显示方式，如纵向平铺、横向平铺
background-position	定义背景图像在元素哪个位置
background-attachment	定义背景图像的滚动

背景颜色background-color：

语法：

background-color:颜色值；

颜色值可以是关键字，也可以是16进制的RGB值。

示例代码：

<html>  <head>    <title>背景颜色</title>    <style type="text/css">      div      {        width:200px;        height:80px;        border: 1px solid black;      }      #d1 {background-color:red;}      #d2 {background-color:#f3de3f;}      #d3 {background-color:#0af7fb;}    </style>  </head>  <body>    <div id="d1"></div>    <div id="d2"></div>    <div id="d3"></div>  </body></html>

背景图像background-image：

它定义了背景图像的来源，与HTML中img标签一样。

语法：

background-image:url("路径地址");

示例代码：

<html>  <head>    <title>背景图像</title>    <style type="text/css">      #d1       {        width:150px;        height:300px;        background-image:url("images/1.jpg");      }    </style>  </head>  <body>    <div id="d1"></div>  </body></html>

设定背景图像时，需要设定宽度和高度，与图片的宽高相同，效果才能出来的。图片自己可以用画图板随便画一张，路径保存成代码中的路径，就可以看出效果了。

背景重复background-repeat：

显示方式有两种，水平平铺和纵向平铺，

语法：

background-repeat:取值；

background-repeat属性取值
值	说明
no-repeat	不平铺
repeat	默认值，水平和垂直同时平铺
repeat-x	水平x轴平铺
repeat-y	垂直y轴平铺

示例代码：

<html>  <head>    <title>背景重复</title>    <style type="text/css">      div      {        width:800px;        height:200px;        border: 1px solid black;        margin-bottom: 20px;        background-image:url("images/2.png");      }      #d1 { background-repeat:no-repeat;}      #d2 { background-repeat:repeat-x;}      #d3 { background-repeat:repeat-y;}      #d4 { background-repeat:repeat;}    </style>  </head>  <body>    <div id="d1">no-repeat</div>    <div id="d2">repeat-x</div>    <div id="d3">repeat-y</div>    <div id="d4">repeat</div>  </body></html>

背景位置background-position：

定义背景图像的横向位置和纵向位置，它只能应用于块元素和替换元素。替换元素包括img，input，textarea，select和object。

语法：

background-position:像素值或关键字；

示例代码：

<html>  <head>    <title>背景位置</title>    <style type="text/css">      #d1       {        width:500px;        height:500px;        border: 1px solid black;        background-image:url("images/1.jpg");        background-repeat:no-repeat;        backgronnd-position: 50px 60px;      }    </style>  </head>  <body>    <div id="d1"></div>  </body></html>

设定position时，需要x轴和y轴，用像素值，两值之间用空格分隔开。同时还需要指定no-repeat。水平x轴和垂直y轴的坐标系需要大家自己理解一下了，坐标原点在左上角，可以理解为第四象限。

background-position关键字取值
值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

示例代码：

<html>  <head>    <title>背景位置关键字</title>    <style type="text/css">      #d1       {          width:500px;          height:500px;          border:1px solid black;          background-image:url("images/1.jpg");          background-repeat:no-repeat;          background-position: center center;      }    </style>  </head>  <body>    <div id="d1"></div>  </body></html>

背景跟随background-attachment：

它是设定背景图像随对象滚动还是固定不动。

语法：

background-attachment:scroll或者fixed；

scroll表示背景图像随对象滚动，是默认值，fixed表示背景图像固定在页面上不动。

示例代码：

<html>  <head>    <title>背景滚动</title>    <style type="text/css">      #d1       {          width:500px;          height:500px;          border:1px solid black;          background-image:url("images/1.jpg");          background-repeat:no-repeat;          background-attachment:fixed;      }</style>  </head>  <body>    <div id="d1"></div>  </body></html>