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代码

1
2
3
4
5
6
7
8
9
10
11
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详解(格子效果)的更多相关文章

  1. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  2. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  3. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  4. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  5. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  6. css过渡和2d详解及案例

    css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...

  7. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  8. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  9. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

随机推荐

  1. Core Java 总结(异常类问题)

    所有代码均在本地编译运行测试,环境为 Windows7 32位机器 + eclipse Mars.2 Release (4.5.2) 2016-10-17 整理 下面的代码输出结果是多少?为什么?并由 ...

  2. 结合阿里云服务器,使用FTP上传和下载文件,出现的问题和解决方案

    一.FTP出现的问题 二.在网上找的方案 如果使用FileZilla默认设置连接ftp服务器的话可能会报以下错误: 错误: 无法建立数据连接:ECONNREFUSED - Connection ref ...

  3. unsafe

    今天无意中发现C#这种完全面向对象的高级语言中也可以用不安全的指针类型,即要用到unsafe关键字.在公共语言运行库 (CLR) 中,不安全代码是指无法验证的代码.C# 中的不安全代码不一定是危险的, ...

  4. 创建或打开解决方案时提示"DotNetCore.1.0.1-SDK.1.0.0.Preview2-003131-x86"错误的解决方案

    提示"DotNetCore.1.0.1-SDK.1.0.0.Preview2-003131-x86"错误的解决方案: 1.检查是否有C:\Program Files (x86)\d ...

  5. 绑定一个值给radio

    在ASP.NET MVC程序中,需要给一个radio list表绑定一个值. 下面是Insus.NET实现的方法: 使用foreach来循环radio每一个选项,如果值与选项的值相同,那这个选项为选中 ...

  6. 使用VS2015进行C++开发的6个主要原因

    使用VS2015进行C++开发的6个主要原因 使用Visual Studio 2015进行C++开发 在今天的 Build 大会上,进行了“将你的 C++ 代码转移至 VS2015 的 6 个原因”的 ...

  7. Yii 2.x Behavior - 类图

    yii\base\Component  继承这个类的类都具备扩展行为的能力

  8. 关闭firefox的plugincheck

    每次打开firefox都弹出这个SB页面: https://www.mozilla.org/en-US/plugincheck/ 关不掉, 很是烦人. 经过地番google,找到了答案: about: ...

  9. FastDFS 安装及使用

    FastDFS 安装及使用 2012-11-17 13:10:31|  分类: Linux|举报|字号 订阅     Google了一下,流行的开源分布式文件系统有很多,介绍如下:   mogileF ...

  10. php注释规范

    注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...