CSS background的设置图片是背景技术

顺晟科技

2022-09-13 12:47:48

273

首先先来看看background有那些值:

可以按顺序设置如下属性（可点击进入相应的css手册查看使用）：
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-attachment 背景图片是固定还是滚动
background-position 背景图片的定位

接下来我们重点来讲解css background通常的使用方法
首先我们来看下面一段代码
background:url(bgimg.gif) no-repeat 5px 5px;
如下图解释:

background:

background为符合属性.属性如下:

background:background-color ||background-image || background-repeat || background-attachment || background-position

border-style: none; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: \'black Verdana\', Arial, Helvetica, sans-serif;">

默认值:tansparent

取值描述(背景颜色) 例子效果 transparent 背景颜色透明

    <div style="background-color:Aqua">
        <span style="border:solid 1px black">span</span><br />
        div
    </div>

color 指定颜色
1.系统定义的颜色
2.rgb(100,100,100)
3.#FFEE11

    <div style="background-color:Silver">和谐社会</div>
    <div style="background-color:rgb(100,200,90)">和谐社会</div>
    <div style="和谐社会</div>

background-image:

默认值:none

取值描述(背景图片) 例子效果 none 没有背景图片

    <div style="background-image:none">Background</div>

url(url)

使用绝对或相对的url指定背景图片

    <div style="background-image:url(\'del.gif\')"></div>

background-repeat:

默认值:repeat

取值描述(背景平铺) 例子效果 repeat 在横向和纵向上平铺

<div style="background-image:url(\'del.gif\'); background-repeat:repeat">
</div>

no-repeat 不平铺

<div style="background-image:url(\'del.gif\'); background-repeat:no-repeat">
</div>

repeat-x 在横向上平铺

<div style="background-image:url(\'del.gif\'); background-repeat:repeat-x">
</div>

repeat-y 在纵向上平铺

<div style="background-image:url(\'del.gif\'); background-repeat:repeat-y">
</div>

background-attachment:

默认值:scroll

取值描述(背景滚动) 例子效果 scroll 跟随内容滚动

<body  style="background-image:url(\'del.gif\'); background-repeat:no-repeat; 
    background-attachment:scroll">
</body>

随着滚动条的移动,可能就看不到了. fixed 不论怎样滚动,始终固定在页面上

<body  style="background-image:url(\'del.gif\'); background-repeat:no-repeat; 
    background-attachment:fixed ">
</body>

始终显示

background-position:

默认值:0% 0%

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。

表达例子效果 background-position: length || length
百分数 | 由浮点数字和单位标识符组成的长度值

<div style="background-image:url(\'del.gif\'); background-position:10px 10px; 
     background-repeat:no-repeat">    
</div><br />
<div style="background-image:url(\'del.gif\'); background-position:50% 50%; 
     background-repeat:no-repeat">
</div>

background-position:position||position

第一个position: top center bottom
第二个position: left center right

<div style="background-image:url(\'del.gif\'); background-position:left center; 
    background-repeat:no-repeat">    
</div><br />
<div style="background-image:url(\'del.gif\'); background-position:center center; 
    background-repeat:no-repeat">
</div>

属性名取值默认值 background-position-x length/left/center/right 0% background-position-y length/top/center/bottom 0%

一个网站上的图片或图标都在一张图片上的css制作方法：

1.CSS样式

1 .d1{width:13px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) 0 0 no-repeat;}
2 .d2{width:13px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -14px 0 no-repeat;}
3 .e1{width:23px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -36px 0 no-repeat;}/*background:url(ex_icon.png) -36px(往右) 0(往下) */  
4 .e2{width:23px;height:70px; border:#C00 1px solid;background:url(ex_icon.png) -61px 0 no-repeat;}

2.html代码

1 <div class="d1"></div>
2 <div class="d2"></div>
3 
4 <div class="e1"></div>
5 <div class="e2"></div>

3.图片

上一篇：css3 background 下一篇：CSS3总结二:(背景)背景/渐变功

网站建设

Css

CSS background的设置图片是背景技术