• 技术文章 >PHP源码 >CSS3教程

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

    不言不言2018-12-10 09:17:01原创615
    使用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属性更改此设置

    以上就是如何使用CSS设置背景颜色和图像的详细内容,更多请关注php中文网其它相关文章!

    phpstudy集成环境下载
    专题推荐:背景颜色 图像
    上一篇:CSS中first-letter如何使用 下一篇:CSS Sprites是什么

    相关文章推荐

    • cocos2dx添加背景颜色• php读取flash文件高宽帧数背景颜色代码• php 切换背景颜色或背景图片或是切换模板是怎样实现的~解决方案 • CSS中关于背景颜色以及背景图像的示例代码分享• 如何使用CSS实现背景图像透明• CSS如何实现背景图像重复效果• css如何实现固定的背景图像

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网