如何使用CSS设置背景颜色和图像

2024-01-17 15:48 小编
 我们先来看看CSS设置背景颜色
 
  我们需要使用background-color来改变背景颜色
 
  background-color:value(颜色编码或者颜色名称)
 
  在值的部分,你可以输入诸如#000000的颜色代码或诸如white的颜色名称,设置的颜色就为背景颜色。
 
  background-color的初始值是transparent,在这种情况下,将应用父元素的背景颜色。如果父元素中没有设置,它将变为白色。
 
  CSS设置图像背景
 
  通过使用background-image属性,我们可以预先设置上传到服务器的图像作为背景。
 
  background-image:url("图像的路径");
 
  在url中,输入要用作背景的图像文件的路径。如果css文件和图像文件位于同一目录中,则只有文件名就可以了。
 
  绝对路径和相对路径都可以用作图像文件的路径。
 
  要输入相对路径,请输入外部样式表的相对路径,而不是html文件的相对路径。
 
  接着我们来看具体的示例
 
  使用background-color设置背景颜色
 
  代码如下
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <title></title>
 
  <styletype="text/css">
 
  body{
 
  background-color:skyblue;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <p>背景颜色设置</p>
 
  </body>
 
  </html>
 
  运行结果
 
  在浏览器上显示如下效果,指定的颜色skyblue被设置为背景颜色
 
  背景颜色
 
  使用background-image设置背景图像
 
  代码如下
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <title></title>
 
  <styletype="text/css">
 
  body{
 
  background-image:url("img/t.jpg");
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <p>背景图像设置</p>
 
  </body>
 
  </html>
 
  运行效果下图所示
 
  背景图像

背景图像


 
 
  当屏幕尺寸大于背景图像时,默认情况下会自动重复显示背景图像。可以使用background-repeat属性更改此设置。
 
  背景图像显示开始位置位于初始设置的左上角。可以使用background-position属性更改此设置


Tag: 如何
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码