CSS 背景background实例
css背景background用于设置html标签元素的背景颜色、背景图片已经其他背景属性。本文章向码农介绍CSS 背景background使用方法和基本的使用实例。需要的码农可以参考一下。
一、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}
这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是否重复的样式。
原文地址:http://www.manongjc.com/article/842.html
相关阅读:
- CSS 教程
- CSS3 教程
- CSS 参考手册
- CSS background
- CSS background-attachment
- CSS background-clip
- CSS background-color
- CSS background-image
- CSS background-origin
- CSS background-position
- CSS background-repeat
- CSS background-size
转载于:https://www.cnblogs.com/myhomepages/p/5516685.html
CSS 背景background实例相关推荐
- 纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- 背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- 5.CSS背景 background
CSS 背景 CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background-image background-repeat back ...
- CSS 背景 background属性
背景是创建更有趣味的网页的常用一种手法,无论是直接使用背景颜色,还是使用背景图像,都能给网页带来丰富的视觉效果. 在CSS1中,就提供了对背景的控制,并提供了 5 个background相关的属性,用 ...
- CSS背景background设置
笔记来源:尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版 文章目录 1. 背景 back-ground-color background-image backgroun ...
- 前端——css 背景background
文章目录 小练习美化a超链接 颜色 背景图 background-image 背景图定位 background-position 用background-position做css sprite 用po ...
最新文章
- 爬取许嵩新歌《雨幕》弹幕,告诉你什么才是真正的创作!
- Hive 禁止提交 大范围磁盘扫描任务(禁止提交where条件包含未分区过滤)
- eclipse及myeclipse改变编码
- AT SELECTION-SCREEN
- spark 算子使用类变量_Scala与Spark是天生的一对?
- IMSIDesign.TurboCAD.Designer.v14
- Java 18 新特性
- Swift游戏实战-跑酷熊猫 08 产生源源不断的移动平台
- 手机摄像头+Matlab完成图像的自动识别
- 【代码大全2】第33章 个人性格
- Redis - CLUSTER命令中集群管理命令详解
- mysql+查询触发器+sql_Mysql基本查询、视图、索引、触发器
- 51单片机串口通信原理
- 基于SpringBOOT的订餐系统
- openlayer 画圆Circle实际半径解决方案
- Scala 系列(二)—— 基本数据类型和运算符
- linux服务器如何指定gpu以及用量
- 散列表查找失败平均查找长度
- 闭包,一个浪漫的故事
- 野性消费之后,年轻人还能撑起国潮下一站吗?