码迷,mamicode.com
首页 > Web开发 > 详细

CSS 背景

时间:2019-09-14 17:24:36      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:no-repeat   body   repeat-x   die   显示   image   round   col   背景图   

<style>
h1
{
    background-color:#6495ed;
}
p
{
    background-color:#e0ffff;
}
div
{
    background-color:#b0c4de;
}
</style>

背景颜色和图片插入

<style>
body 
{
    background-image:url(‘paper.gif‘);
    background-color:#cccccc;
}
</style>

<style>
body
{
         background-coolor:rgb(222,222,222);
}

直接铺

<style>
body
{
    background-image:url(‘gradient2.png‘);
}
</style>

水平铺

<style>
body
{
    background-image:url(‘gradient2.png‘);
    background-repeat:repeat-x;
}
</style>

设置定位+不平铺

<style>
body
{
    background-image:url(‘img_tree.png‘);
    background-repeat:no-repeat;
}
</style>

背景图片不重复,设置 position 实例。

背景图片只显示一次,并与文本分开。

实例中还添加了 margin-right 属性用于让文本与图片间隔开。

<style>
body
{
    background-image:url(‘img_tree.png‘);
    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;
}
</style>

 

CSS 背景

标签:no-repeat   body   repeat-x   die   显示   image   round   col   背景图   

原文地址:https://www.cnblogs.com/claudia529/p/11519134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!