css样式之background详解
background用法详解:
1、background-color 属性设置元素的背景颜色
可能的值
color_name 规定颜色值为颜色名称的背景颜色(比如 red)
hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)
rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0)
transparent 默认 背景颜色为透明
2、background-image 属性设置元素的背景图片
可能的值
单个背景图片:background-image:url(a.png)
多个背景图片:background-image:url(a.png),url(b.png)
线性渐变:background-image:-webkit(-repeating)-linear-gradient(方向,颜色值 像素或百分比,颜色值 像素或百分比...)
方向:left,right,top,bottom,90deg,180deg
颜色值 像素或百分比:yellow 10%,transparent 4px,rgb(0,0,0) 2px
径向渐变:background-image:-webkit(-repeating)-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)
<bg-position>:默认为center
<shape>:circle,ellipse
<size>:closest-side,farthest-side,closest-corner,farthest-corner,contain or cover
3、background-size 属性用来重设背景图片大小
contain:缩小背景图片使其适应标签元素
cover : 背景图片放大延伸到整个标签元素大小
像素 : 标明背景图片缩放的尺寸大小
百分比 :百分比是根据内容标签元素大小,来缩放图片的尺寸大小
4、background-position 属性用来设置背景图片位置
可能的值:left,right,top,bottom,center,像素,百分比
5、background-repeat 属性用来设置背景图片位置
可能的值:repeat,repeat-x,repeat-y,no-repeat,space(不会被裁剪或改变大小),round(不会被裁剪但是会改变图像大小)
6、background-attachment 属性用来设置背景图片是否可以滚动
可能的值:scroll,fixed
7、background-clip 属性用来规定背景的绘制区域
可能的值:border-box,padding-box,content-box
8、background-origin 属性用来规定 background-position 属性相对于什么位置来定位
可能的值:border-box,padding-box,content-box
扩展:绘制方格
html代码
<div>使用背景绘制方格,使每个文字都在方格里,效果图如下。</div>
css代码
div {
width: 300px;
height: 300px;
border-left: 3px solid pink;
border-top: 3px solid pink;
background-image: -webkit-linear-gradient(180deg, pink 3px, transparent 3px) , -webkit-linear-gradient(90deg, pink 3px, transparent 3px);
background-size: 30px;
line-height: 30px;
font-size:25px;
letter-spacing: 5px;
}
结果
css样式之background详解的更多相关文章
- css样式之background详解(格子效果)
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- Android spinner 样式及其使用详解
设计与开发首页 > 应用专题 > 移动开发 > 正文> Android spinner 样式及其使用详解 相关文章: Android 开源项目应用程序与框架推荐 Android ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...
随机推荐
- HTML URL地址解析
通过JavaScript的location对象,可获取URL中的协议.主机名.端口.锚点.查询参数等信息. 示例 URL:http://www.akmsg.com/WebDemo/URLParsing ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 编写高质量代码:改善Java程序的151个建议(第5章:数组和集合___建议75~78)
建议75:集合中的元素必须做到compareTo和equals同步 实现了Comparable接口的元素就可以排序,compareTo方法是Comparable接口要求必须实现的,它与equals方法 ...
- Asp.net Boilerplate源码中NotNullAttribute的用处
看Asp.net Boilerplate 1.1.3.0源码时发现有一个NotNullAttribute的定义和27处的引用,就是不知道它的作用,当然顾名思义是可以的,就是不知道它是怎么判断的,在哪里 ...
- ExtJS 4.2 第一个程序
本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
- C++中的const
一,C++中const的基本知识 1.C++中const的基本概念 1.const是定义常量的关键字,表示只读,不可以修改. 2.const在定义常量的时候必须要初始化,否则报错,因为常量无法修改,只 ...
- mysql进阶之存储过程
往往看别人的代码会有这样的感慨: 看不懂 理还乱 是离愁 别是一番滋味在心头 为什么要使用存储过程? 在mysql开发中使用存储过程的理由: 当希望在不同的应用程序或平台上执行相同的函数,或者封装特定 ...
- 【用户交互】APP没有退出前台但改变系统属性如何实时更新UI?监听系统广播,让用户交互更舒心~
前日,一小伙伴问我一个问题,说它解决了半天都没解决这个问题,截图如下: 大概楼主理解如下: 如果在应用中有一个判断wifi的开关和一个当前音量大小的seekbar以及一个获取当前电量多少的按钮,想知道 ...
- java观察者模式
像activeMQ等消息队列中,我们经常会使用发布订阅模式,但是你有没有想过,客户端时如何及时得到订阅的主题的信息?其实就里就用到了观察者模式.在软件系统中,当一个对象的行为依赖于另一个对象的状态 ...
- jquery学习(一)
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...