css的background
css2中有五个与背景相关的属性。它们是:
background-color: 完全填充背景的颜色
background-p_w_picpath: 用作背景的图片
background-position: 确定背景图片的位置
background-repeat: 确定背景图片是否重复铺平
background-p_w_upload: 确定背景图片是否随页面滚动
基本属性
如果图片在文件夹内,就写成这样,均是用得相对路径:
/* Example 1: 默认. */
left
center
right
垂直方向有:
top
center
bottom
就像之前那样使用它们:
background-position: top right;
百分比的使用方法也一样:
再看一个fixed例子:
例如, 这些设定...
background-color: transparent;
背景的“非常规”应用
背景属性除了设置美化元素之外,也有其他广泛的非常规用途。
Faux Columns
Text Replacement
Easier Bullet Points
ul {
CSS3中的背景属性
多背景图片
background-p_w_picpath: url(top-p_w_picpath.jpg), url(middle-p_w_picpath.jpg), url(bottom-p_w_picpath.jpg);
新属性1: Background Clip
background-clip: border-box;
background 在 border 内显示,和现在的方式一样。.background-clip: padding-box;
backgrounds 在 padding内显示,而非border,跟IE6的处理方式相同。background-clip: content-box;
backgrounds 只显示在内容内, 而非border 或 padding。background-clip: no-clip;
默认值,和border-box一样。
新属性2: Background Origin
这个属性需要和background-position属性一起使用。你可以改变background-position 的计算方式(就像 background-clip一样).
background-origin: border-box;
background-position 从border开始计算。background-origin: padding-box;
background-position从padding开始计算。background-origin: content-box;
background-position从内容开始计算。
想看background-clip和background-origin属性应用的例子请看CSS3.info.
新属性3: Background Size
background-size属性用来重定义你的背景图片大小。其可能值有:
background-size: contain;
缩小图片以符合元素大小。background-size: cover;
扩展图片以符合元素大小。background-size: 100px 100px;
重定义大小。background-size: 50% 100%;
用百分比重定义。
你可以看看例子:CSS 3 specifications
新属性4: Background Break
CSS 3中, 元素能分拆成多个部分(例如inline元素span能占多个行)。background-break属性控制背景图像如何在多个部分展示。
还记得CSS 2中图片可能会因过界而部分消失吗? CSS 3 有两个新可能值来解决这一问题:
space: 设置重复图片的间距。
round: 重复图片自动调整大小以正好填充元素。
background-repeat: space的例子:CSS 3 specifications。
Background Attachment属性的改变
background-p_w_upload有个新可能值: local.。它与可滚动的元素相关(比如拥有属性overflow: scroll;).。当background-p_w_upload值为scroll时, 背景图片不会随内容滚动。现在有background-p_w_upload:local,图片可以随内容一起滚动.
总结
你应该好好领悟background,并且应当留意即将到来的CSS3,就像我一样!
转载于:https://blog.51cto.com/huangby/1346034
css的background相关推荐
- css背景图加载太慢怎么办,CSS实现background背景图优化,快速加载图片
之前写过一篇:CSS中background属性总结整理了background 的常用属性. 日常项目中经常会用到全屏的图片, .png 和 .jpg 的图片都太大,加载缓慢. 我们可以使用webP格式 ...
- html背景图片带边框,css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- CSS中background与background-image的区别
CSS中background与background-image的区别 1.如果只是设置两张背景图不涉及CSS样式那么两者都可以使用 2.如果设置样式那就只能用background,如 以下是不适用ba ...
- 【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构 创建DIV <div class="div1">1 </div> 样式 widt ...
- 背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- 原来CSS的background还可以这么玩
身为一个前端开发者,背景是开发中的常客.大到整个网站的主题背景,小到一个按钮的背景.CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景. ...
- CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
- CSS背景background详解,background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
最新文章
- R使用深度学习LSTM构建时间序列预测模型
- Kaggel实战:识别手写体[knn改进算法]
- c语言 unlink,unlink 漏洞笔记
- 从 Spark 的 DataFrame 中取出具体某一行详解
- java mysql dump_Java 调用Mysql dump 备份数据库
- java treemap_Java TreeMap firstEntry()方法及示例
- 浅谈ASP.NET的内部机制(二)
- axurerp折线图控件_Axure教程:如何画出曲线图?
- python入门——P44魔法方法:简单定制
- 中国区块链开发者的热血时代来临!
- Appium 解决微信公众号、小程序切换 webview 后无法定位元素的问题
- iOS即时通讯之CocoaAsyncSocket源码解析五
- cv2-drawline
- logiops安装以及在ubuntu中配置logiops为罗技鼠标自定义按键和手势
- 该文件没有与之关联的程序来执行操作。解决方案
- Dzz任务板初版完成笔记-仿trello可私有部署的一款轻量团队任务协作工具。
- 基线、底线、顶线、中线
- elasticsearch的父子_ElasticSearch 学习记录之父子结构的查询
- 1.1 软件的定义、特征和分类
- 函数的谓词是什么? cin的返回值是什么?
热门文章
- McAfee可能要收购NitroSecurity?
- 怎样在swift中创建CocoaPods
- /dev/rdsk 与 /dev/dsk区别
- 定时清理tomcat日志文件
- 史上最全的“大数据”学习资源
- 业界对生成图片缩略图的做法归纳
- pfile和spfile的区别
- 山东计算机类好的民办大学,山东四大坑人学校-山东坑人的民办大学(野鸡大学)...
- matlab在输电线路故障测距中应用,Matlab在输电线路故障测距中的应用.doc
- 上课讲到的设计模式总结