石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 技术笔记 >

CSS 背景background使用方法

发表日期:2019-12-17 12:37文章编辑:css教程浏览次数: 标签: 技术笔记|css教程|    

一、Css background背景语法
CSS背景基础知识
 
CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。
 
背景语法:
 
background: background-color || background-image || background-repeat || background-attachment ||background-position
 
 
CSS中背景单词:
 
background CSS手册查询-background
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。
 
Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
如:
 
background:#000 url(图片地址) no-repeat left top
Css background背景作用:
 
1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
2、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。
 
设置网页背景样式
 
Html原始背景与CSS背景对照
Html是指对应效果的table背景设置
 
Html背景单词:
 
Bgcolor设置背景颜色 与CSS背景颜色对应background-color
Background设置图片作为背景与CSS背景图片对应background-image
 
 
 
二、背景颜色  
background-color:#FFF
设置对象背景为纯白色
 
如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
 
 
 
三、CSS图片背景
CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。
 
background:url(http://www.manongjc.com/logo.gif);
设置LOGO图片作为背景
 
 
background-image:url(http://www.manongjc.com/logo.gif);
具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复。
 
background-attachment使用解析:
 
background-attachment:fixed; 背景固定
 
background-attachment:scroll; css背景图片是随对象内容滚动
 
图片background背景语法:
 
background-image :url (url)
background-image :url (http://www.manongjc.com/logo.gif)
 
设置对象背景为图片http://www.manongjc.com/logo.gif
 
如果图片作为背景时候要求是否重复平铺,平铺方向等我们都需要background-position和background-repeat配合使用
 
div{background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px } 
这里定义对象div,背景图片为http://www.manongjc.com/logo.gif,并且背景图片不重复,定位于div对象靠左距离5px,靠上距离6px
 
 
 
四、背景居中
CSS 背景分为左右居中和上下居中。
 
背景图像上下居中,可以使用计算上下高度然后平分设置,如上下高度距离为500px,那就设置图片居顶部多少PX可以让图片实现上下居中。
 
 
 
五、复合背景样式简写
我们使用时候都需要考虑到代码优简,这里可以优化的简写代码
 
1、如果只设置背景为单一颜色
 
background-color:#FFF
我们简写为
 
background:#FFF
2、图片设置为背景简写
 
background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px 
我们简写为:
 
background:url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px 
 
 
六、CSS background(背景)总结
使用图片作为背景在一个网页布局中常常会遇到,希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center top ;(解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须,一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置)
 
1、设置图片作为背景如果图片设置图片在X坐标方向重复,如果再设置图片在对象位置的左或右位置时将无效,可设置在对象上或下位置开始显示。
 
2、设置图片作为背景如果图片设置图片在Y坐标方向重复,如果再设置图片在对象位置的上或下位置时将无效,可设置图片在对象左或右位置开始显示。
 
3、如果设置背景完全重复显示,那设置图片在对象上下左右位置开始显示将无线。
 
网页布局时候我们常常对网页背景设置颜色、背景设置图片,达到我们需要的美观效果,我们实践制作写css background背景尽量从简,图片引入时候注意路径正确,如需定位对象背景。
 
经典背景复合属性表达式:
 
.manongjc{background:#FFF url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px} 
这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是否重复的样式。

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/jsbj/609.html

网站设计案例推荐

热门新闻

DEDECMS提示Fatal error错误

Nginx的Gzip压缩配置

织梦DedeCMS定时自动生成首页HTML的实现方法

IIS7下js文件启用Gzip后却不压缩的解决方法

dede织梦教程:列表页、文章页调用所有顶级栏目文章的方法

WordPress 集成百度 Sitemap 实时推送代码

织梦DedeCMS定时自动生成首页HTML的实现方法

WORDPRESS文章中微信打赏功能的2种实现方法

相关新闻

Dedecms如何显示文章数量的方法

dede出现search.php on line 44 search.php报错

dedecms大量删除文章后,列表页显示错误修复办法

DedeCMS最新文章、相关文章、推荐文章、热点文章、头条

织梦Dedecms tag标签长度限制的修改

dede织梦网站地图sitemap移出data

推荐新闻

帝国cms怎么实现页面自动生成html

dede简略标题调用标签

帝国cms灵动标签调用字母所属的信息

织梦DEDECMS教程:添加RSS订阅功能

正确配置 WordPress 邮件SMTP

帝国cms如何在tags列表页获取当前tag的ID方法

织梦DedeCMS实现{dede:channel}标签增加数字序号的方法

织梦CMS文章模型整合下载功能,可判断点数,会员组等下载权限

IIS7下js文件启用Gzip后却不压缩的解决方法