background复合属性顺序_background:常用背景属性(复合属性)
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:background-color | 背景颜色
background-position | 背景图片位置
background-size | 背景图片大小
background-repeat | 背景图片重复填充
background-origin | background-position属性应该是相对位置。
background-clip | 背景的绘制区域
background-attachment | 背景图片是否滚动
background-image | 背景图片
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
属性详解:
background-attachment
--------设置背景图像是否固定或者随着页面的其余部分滚动。
属性值:
background-attachment:fixed
实例
如何指定一个固定的背景图像:
图片地址,不重复,固定
background-blend-mode
--------属性定义了背景层的混合模式(图片与颜色)。
属性值:
background-blend-mode:lighten
实例
div背景为滤色模式
background-blend-mode:screen(滤色模式)
滤色模式效果
background-clip
--------属性指定背景绘制区域。
属性值:
background-clip:padding-box
实例
指定绘图区的背景:
background-clip:content-box
效果
background-color
--------设置一个元素的背景颜色。
属性值:
background-color:yellow
实例
设置部分文字的背景颜色
background-color:yellow
效果
background-image
--------设置一个元素的背景图像。
属性值:
background-image:url(1.png)
实例
多个背景图片
url,origin,clip,size
效果
background-origin
------指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定",这个属性没有任何效果。
属性值:
background-origin:border-box
实例
内容框相对定位的背景图片:
border-box,content-box
边框,内容框
background-position
--------设置背景图像的起始位置。
属性值:
background-postion:center right;
实例
如何定位background-image:
background-postion:center
效果
background-repeat
--------设置如何平铺对象的 background-image 属性。
属性值:
background-repeat:no-repeat
实例
如何在水平方向重复背景图像。
水平方向重复
效果
background-size
--------指定背景图片大小。
属性值:
background-size:3px 5px;
实例
拉伸背景图像完全覆盖内容面积。
100%
效果
background复合属性顺序_background:常用背景属性(复合属性)相关推荐
- background复合属性顺序_background属性顺序
css中background中各属性排序先后不同最终效果也不....scroll_r { height:200px; background:url(../images/scroll_bar.png) ...
- CSS常用背景属性(背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法)
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
- list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法,背景图像定义项目符号/学习笔记
一.list-style-type属性 在css中list-style-type属性可以用于控制列表项显示符号的类型 /*使用该方法可以使用css来定义列表的type属性*/ 属性值 描述 属性值 描 ...
- css语言中选项是背景图像的属性,HTML_学习CSS的背景图像属性background,CSS的背景属性“background”提供 - phpStudy...
学习CSS的背景图像属性background CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看backgr ...
- C#常用控件的属性以及方法(转载)
-----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...
- Css3之基础-5 Css 背景、渐变属性
一.CSS 背景概述 背景属性的作用 - 背景样式可以控制 HTML 元素的背景颜色.背景图像等 - 背景色 - 设置单一的颜色作为背景 - 背景图像 - 以图片作为背景 - 可以设置图像的位置.平铺 ...
- CSS3新增-属性(长度颜色背景)选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
- html中下边框过渡效果,CSS3 参与背景过度的属性有哪些(transition-property语法规则及多组过渡效果实例)...
CSS3 新增了背景或元素运动过度效果属性 transition,其中有一个取值为过渡实体 transition-property,也就是设置什么参与过渡,有多个实体可供选择,如常用背景颜色(back ...
- 背景图的属性(backgroud)
backgroud:red url(../img/tupian.png) 1.backgroud-origin(背景图的起始点) 属性值: padding-box默认值 ...
最新文章
- C++ 笔记(21)— 处理文件(文件打开、关闭、读取、写入)
- android 52 粘滞广播
- 解决 Illegal DefaultValue null for parameter type integer 异常
- Apache Kafka-通过concurrency实现并发消费
- 虚拟机添加串口设备方法
- Cocoapods pod update执行失败报错CocoaPods was not able to update the `master` repo.2019的解决...
- 使用LiveClick升级您的实时书签
- php求链表中位数,先给伸手党的php链表遍历求和
- 企业类库问题 public key 问题[经过自己测试]
- SignalR与自托管Windows服务
- http://www.uupoop.com/ps/
- POJ-3660.Cow Contest(有向图的传递闭包)
- 数学建模四大模型、历年国赛题目以及优秀论文(备战2021年数模国赛)
- Dmoz中文目录收录的中文博客
- Kafka-3.0.1-Docker+集群 踩坑笔记
- Python期末考试题库
- 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能(转)
- 马尔可夫随机场(Markov Random Field)与马尔可夫链
- debian 刷新dns命令
- Effective C++ More Effective C++(四)