1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS background 之设置图片为背景技巧

CSS background 之设置图片为背景技巧

时间:2024-06-07 02:26:01

相关推荐

CSS   background 之设置图片为背景技巧

首先先来看看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

background-image:

默认值:none

background-repeat:

默认值:repeat

background-attachment:

默认值:scroll

background-position:

默认值:0% 0%

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

一个网站上的图片或图标都在一张图片上的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.图片

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。