Css background背景语法
一、Css background背景语法 - TOP
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、设置图为背景。可以设置对象背景为图片,如果背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何位置。
Background分析解析图
Css background复合背景结构分析图
- Body{background:#FFF url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 fixed }
设置网页背景样式
Html原始背景与CSS背景对照
Html是指对应效果的table背景设置
Html背景单词:
Bgcolor设置背景颜色 与CSS背景颜色对应background-color
Background设置图片作为背景与CSS背景图片对应background-image
最原始HTML背景设置演示代码:
- <table bgcolor="#996600">
- <tr>
- <td background="http://www.divcss5.com/img/css-logo.gif"
- width="130" height="100"> </td>
- </tr>
- </table>
这里设置了table背景颜色为#996600,然后设置了td的背景图片为http://www.divcss5.com/img/css-logo.gif
二、背景颜色 - TOP
- div{background-color:#FFF}
设置对象背景为纯白色
如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色,可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。
CSS 背景颜色设置DIV+CSS演示图:
以上截图分别使用background-color和background来设置对象背景颜色
三、CSS图片背景 - TOP
如果图片作为背景时候要求是否重复平铺,平铺方向等我们都需要background-position和background-repeat配合使用
- div{background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif); background-repeat : no-repeat;background-position : 5px 6px }
这里定义对象div,背景图片为http://www.divcss5.com/img201301/divcss5-logo-2013.gif,并且背景图片不重复,定位于div对象靠左距离5px,靠上距离6px
四、DIV CSS背景居中 - TOP
CSS 背景分为左右居中和上下居中,具体左右居中方法见上图。
背景图像上下居中,可以使用计算上下高度然后平分设置,如上下高度距离为500px,那就设置图片居顶部多少PX可以让图片实现上下居中。
五、复合背景样式简写 - TOP
我们使用时候都需要考虑到代码优简,这里可以优化的简写代码
1、如果只设置背景为单一颜色
background-color:#FFF 我们简写为 background:#FFF
- background-image :url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif); background-repeat : no-repeat;background-position : 5px 6px
我们简写为:
- background:url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px
六、CSS background(背景)总结 - TOP
1、设置图片作为背景如果图片设置图片在X坐标方向重复,如果再设置图片在对象位置的左或右位置时将无效,可设置在对象上或下位置开始显示。
2、设置图片作为背景如果图片设置图片在Y坐标方向重复,如果再设置图片在对象位置的上或下位置时将无效,可设置图片在对象左或右位置开始显示。
3、如果设置背景完全重复显示,那设置图片在对象上下左右位置开始显示将无线。
网页布局时候我们常常对网页背景设置颜色、背景设置图片,达到我们需要的美观效果,我们实践制作写css background背景尽量从简,图片引入时候注意路径正确,如需定位对象背景。
- .divcss5{background:#FFF url (http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 5px 6px}
这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是否重复的样式。
Css background背景语法相关推荐
- CSS —— background 背景
<!--背景:背景支持为元素添加背景颜色和背景图片,接下里介绍背景相关的属性. ①background-color:背景颜色. CSS代码 : <style> #box{ width ...
- CSS background 背景
在每一层中,下列的值可以出现 0 次或 1 次: <attachment> <bg-image> <position> <bg-size> <re ...
- css background:背景图片拉伸铺满
http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=8 background: url("img.jpg&quo ...
- html坐标轴背景色,CSS 背景(css background)
CSS 背景-CSS background 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式 ...
- CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景 ...
- css中背景颜色用哪个,CSS 背景颜色
颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background ...
- CSS(Emmet语法、复合选择器、元素显示模式、背景)
文章目录 1.Emmet语法 1.1快速生成HTML结构语法 1.2快速生成CSS样式语法 1.3快速格式化代码 2.CSS的复合选择器 2.1什么是复合选择器 2.2后代选择器 2.3子选择器(重要 ...
- CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- 背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
最新文章
- python中修饰器的优点和作用_Python装饰器(你想知道的这里都有)
- tinypdf虚拟打印机中文版
- 清华又揽一位AI大牛!前微软全球副总裁开招博士生!
- 为什么公司要对员工的薪资保密?
- abstract、virtual、override 和 new
- python创意实用案例-分享10个给Python小白看的实用案例,入门Python就在这里了
- 中国武术和泰拳的对抗史
- 图书馆系统软件测试计划,图书馆管理系统软件测试计划
- struts2拦截器实现登录拦截
- ajax请求csv文件,使用Ajax读取csv /文本文件
- Centos系统如何开启关闭防火墙
- STM32F4系列定时器简介
- Kubernetes 国外镜像的网络问题
- 考研政治——马克思三大原理之对立统一
- 地铁大数据挖掘之数据预处理——从原始一卡通数据提取城市地铁客流(一)
- 万事开头难 - 第一个Android应用
- 因为老板的暴脾气,我裸辞了
- 【从AWS亚马逊平台上的s3存储桶上下载文件到win10电脑上】
- ssh 卡在 SSH2_MSG_SERVICE_ACCEPT received
- java以流的形式将文字写在图片上
热门文章
- [区块链安全-Damn-Vulnerable-DeFi]区块链DeFi智能合约安全实战-连载中
- 为什么面向对象编程是有用的?(以一个角色扮演游戏为例)
- mysql表中指定位置新增一个字段
- 04-nginx静态资源部署实战
- 多核心对cpu整体性能提升
- 【第六弹】经典移植至IOS端、经典合集
- 《淘宝技术这十年》读书笔记: 分布式时代和中间件
- php与dreamweaver基础教程,Dreamweaver基础教程 基础技巧全面接触
- c语言sockaddr_in6,C语言socket编程总结(三) struct sockaddr_in /struct sockaddr_in6/struct addrinfo 结构体...
- 计算机专业 845,浙江工商大学2020年考研845计算机基础综合考试大纲