CSS背景

背景颜色

属性名background-color
颜色的值可以采用3种方式

预定义的颜色名字
比如red,gray,white,black,pink，
rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
16进制的表示
00ff00 等同于 rgb(0,255,0)


<p class="lei">我是有背景颜色</p>

用图片做背景

<style>
    div#test{
        width: 200px;
        height: 100px;
        background-image: url(../photoshop/skill1.png);
    }
</style>


<div id="test">
    这是一个有背景图片的DIV
</div>

背景重复
background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复

background-repeat: no-repeat; 不重复背景图

<style>
    div#test{
        width: 200px;
        height: 100px;
        background-image: url(../photoshop/skill1.png);
        background-repeat: no-repeat;
    }
</style>

<div id="test">
    这是一个有背景图片的DIV
</div>

背景平铺

属性：background-size
值：contain

<style>
    div#test{
        width: 200px;
        height: 100px;
        background-image: url(../photoshop/skill1.png);
        background-size: contain;
    }
</style>


<div id="test">
    背景平铺，通过拉伸实现会有失真
</div>

CSS背景

00ff00 等同于 rgb(0,255,0)

评论