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
取值 | 描述(背景颜色) | 例子 | 效果 |
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 |
<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.图片
CSS background 之设置图片为背景技巧相关推荐
- html css设置背景图片,css background之设置图片为背景技巧
Bac公斤round是什么含义,翻译过来有配景意义.异样在css内中作为css属性一成员同样是有后援含义,何况是设置装备摆设后盾图片.布景色调.布景图片截取等款式. 起首先来看看bac公斤round有 ...
- PS橡皮擦魔棒设置图片的背景为透明
PS橡皮擦魔棒设置图片的背景为透明 操作步奏 1.PS打开图片 2.选中魔棒橡皮檫 3.点击需要设置为透明度的区域 4.点击文件另存为图片 操作如图:
- CSS学习中|插入图片和背景图片区别
1.插入图片,用的最多,比如产品展示类,移动位置只能靠盒模型 padding margin 2.背景图片我们一般用于小图标的背景 背景图片只能通过background-position 插入图片代码: ...
- wps怎么图片透明_Tips:设置图片透明背景
点击"一只七秒记忆的鱼"关注我 TIPS: 平时在做PPT.H5.长图等等 都会用到"插入图片"功能 一般找到的图片都不是透明背景 那么会产生以下效果,非常影响 ...
- CSS布局:设置图片在DIV中上下左右居中(水平和垂直都居中)
CSS布局实例,这个例子相信很实用,让一个图片在Div容器中上下.左右都居中,也就是水平和垂直都居中,有用吧,平时遇到的机率挺高的,下面结合CSS和HTML来实现这个演示,请参见代码: <sty ...
- iosxib 设置图片_iOS-xib使用技巧[转载]
iOS开发的这些年里,我遇到过这样的一群人,他们认为用代码写UI的人就要NB一点,用xib就是要低一个级别.更有一个高级工程师Level的朋友,聊天当中还特意强调自己全用代码写UI.对此我只能在心里暗 ...
- 利用css定义,设置flash为背景
<CENTER><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src ...
- html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
- CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇 本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
最新文章
- multiple problems have occured
- 计算机专业考试基础知识,计算机专业基础知识要点及考试考试.docx
- python单选按钮重置_python – Tkinter单选按钮初始化错误
- aem 渲染_AEM中的单元测试(大声思考)
- mysql gtid binlog_MySQL之-四步实现BinLog Replication升级为GTIDs Replication的代码实例
- 使用thinkPHP做注册程序的实例
- 迟到的年度总结,我们应该收放自如
- C语言储蓄系统编程,C语言:银行储蓄系统的开发(初级)-Go语言中文社区
- python 连通区域检测_浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)...
- 电脑表格制作教程入门_微信销售小程序入门教程:制作+营销
- solidworks工程图转PDF缺少arial字体
- 功能不错的Snagit截图软件
- python中小学生编程学习-推荐几个适合小白学习Python的免费网站
- 苹果cms免费自适应模板下载
- 二叉树的自下而上、从右到左的层次遍历算法实现
- Buck-Boost 变换器和红外 LED 驱动器
- OpenGL实现鱼眼矫正实时视频处理
- document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
- 史上最强的YUV转换RenderScript,支持转换成RGBA,BGRA,并且同时支持旋转,翻转,YUV数据格式支持NV21, YV12, YUV420_888, 分别对应Android Camer
- Python requests +PrettyTable 查询高铁或者动车票