欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

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

发布时间:2019-05-13  编辑:杨雨个人博客网站   点击:   

使用CSS设置背景我们需要用到background背景属性,通过background属性我们可以设置背景颜色和背景图像,下面我们就来看看CSS设置背景的具体方法。

背景

我们先来看看CSS设置背景颜色

我们需要使用background-color来改变背景颜色

background-color:value(颜色编码或者颜色名称)

在值的部分,你可以输入诸如#000000的颜色代码或诸如white的颜色名称,设置的颜色就为背景颜色。

background-color的初始值是transparent,在这种情况下,将应用父元素的背景颜色。如果父元素中没有设置,它将变为白色。

CSS设置图像背景

通过使用background-image属性,我们可以预先设置上传到服务器的图像作为背景。

background-image: url("图像的路径");

在url中,输入要用作背景的图像文件的路径。如果Css文件和图像文件位于同一目录中,则只有文件名就可以了。

绝对路径和相对路径都可以用作图像文件的路径。

要输入相对路径,请输入外部样式表的相对路径,而不是Html文件的相对路径。

接着我们来看具体的示例

使用background-color设置背景颜色

代码如下

<!DOCTYPE Html>
<Html>
<head>
  <title></title>
  <style type="text/Css">
    body{
      background-color: skyblue;
    }
  </style>
</head>
<body>
<p>背景颜色设置</p>
</body>
</Html>

运行结果

在浏览器上显示如下效果,指定的颜色skyblue被设置为背景颜色

背景颜色

使用background-image设置背景图像

代码如下

<!DOCTYPE Html>
<Html>
<head>
  <title></title>
  <style type="text/Css">
    body{
      background-image: url("img/t.jpg");
    }
  </style>
</head>
<body>
<p>背景图像设置</p>
</body>
</Html>

运行效果下图所示

背景图像

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

背景图像显示开始位置位于初始设置的左上角。可以使用background-position属性更改此设置 本文地址:http://itbyc.com/web/css3/19735.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1