css背景样式background
background用来定义html元素的背景效果
background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法
1.十六进制方式,如"#ff0000"
2.RGB方式,如"rgb(255,0,0)"
3.颜色名称,如"red"
background-image:定义元素的背景图片,通过background-image:url('path/图片名称')指定
默认情况下,背景图片会在水平和垂直方向上进行平铺重复显示,即默认的background-repeat值为repeat
background-repeat:定义元素的背景图片是否以及如何重复显示
默认值值repeat,no-repeat、repeat-x、repeat-y分别表示不重复、在水平方向、垂直方向重复显示
background-attachment:定义元素的背景图片是否固定或者随着页面的其余部分滚动
默认值为scroll随页面部分滚动,fixed表示固定不滚动,inherit表示从父元素继承
background-position:定义元素的背景图片起始位置,例如定义图片右上角不重复显示
(left center right * top center bottom)九种组合,并且这两个值如果只指定一个那么另外一个默认为center
x% y%:表示水平位置和垂直位置,默认为左上角0% 0%,右下角是100% 100%,
xpos ypos:表示水平位置和垂直位置
inherit表示从父元素继承
背景效果通过上述5个属性来控制,为使用方便可以将这些属性合并在一起,简写为 "background",当时用简写属性时,顺序为color、image、repeat、attachment、position,可根据实际需要选择,无需全部使用,例如
body {background:lightpink url('img_tree.png') no-repeat right top;}
css背景样式background的更多相关文章
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
- 0016 CSS 背景:background
目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...
- CSS背景样式
CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...
- HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS背景样式和列表样式
background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...
- CSS常用样式--background
CSS background 属性 参考:W3school- CSS background 所有浏览器都支持 background 属性,其简写形式,在一个声明中设置所有的背景属性,各属性需按顺序,语 ...
- CSS 背景图像 background属性简写
background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...
- CSS背景属性background
background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...
随机推荐
- Python 全栈开发五 迭代器 生成器 装饰器
一.迭代器 迭代协议:对象必须提供一个next方法,执行该方法后会返回迭代的下一项或者抛出Stopiteration异常,终止迭代.切只能往前,不能倒退. 可迭代对象:遵循迭代写一点对象就是可迭代对象 ...
- python-列表解析、字典解析、集合解析
列表解析.字典解析.集合解析 列表解析 生成一个列表 nums = [1, 3, 9] list_gen = [num**2 for num in nums if x <= 5] # [1, 9 ...
- Kotlin Linux下的环境搭建
Kotlin是JVM世界里的未来主宰,不管你信不信,我反正相信了! 好吧,如果你不糊涂,就跟着我一起学学吧,哈哈 一下载https://github.com/JetBrains/kotlin/rele ...
- cocos2d-x C++ (iOS)集成第三方微信分享
1.新建项目并下载 ShareSDK 1.Cocos2d-x项目环境搭建,不会的童鞋自行面壁哈: 网页链接. 2.ShareSDK iOS版本的 Cocos2d-x 插件是在ShareSDK iOS版 ...
- ####### Scripts Summary #######
Scripts Summary Version: 1.0.1 issueDate: 2017-11-11 modifiedDate: 2017-11-28 0.configuration 1.oper ...
- java微信小程序调用支付接口(转)
简介:微信小程序支付这里的坑还是有的,所以提醒各位在编写的一定要注意!!! 1.首先呢,你需要准备openid,appid,还有申请微信支付后要设置一个32位的密钥,需要先生成一个sign,得到pre ...
- UVALi 3263 That Nice Euler Circuit(几何)
That Nice Euler Circuit [题目链接]That Nice Euler Circuit [题目类型]几何 &题解: 蓝书P260 要用欧拉定理:V+F=E+2 V是顶点数; ...
- Linux SSH 免秘钥登录
SSH 免秘钥登录 ssh:是一种安全加密协议 ssh username@hostname ssh gongziyuan.com:以当前用户登录该机器(如果不是当前用户,需要这么干:ssh ...
- react的props验证
Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效. 当向 props 传入无 ...
- LeetCode167.两数之和II-输入有序数组
给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返回的下标值 ...