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代码
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详解(格子效果)的更多相关文章
- 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过渡和2d详解及案例
css过渡和2d详解及案例(案例在下方,不要着急) 本文重点: 1.在2D变化使用过程中,有些需求需要两种或两种以上的变化同时使用, 值得注意的是尽量把位移变化放在最前面,把其他变化放在最后面,属性值 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
随机推荐
- Core Java 总结(异常类问题)
所有代码均在本地编译运行测试,环境为 Windows7 32位机器 + eclipse Mars.2 Release (4.5.2) 2016-10-17 整理 下面的代码输出结果是多少?为什么?并由 ...
- 结合阿里云服务器,使用FTP上传和下载文件,出现的问题和解决方案
一.FTP出现的问题 二.在网上找的方案 如果使用FileZilla默认设置连接ftp服务器的话可能会报以下错误: 错误: 无法建立数据连接:ECONNREFUSED - Connection ref ...
- unsafe
今天无意中发现C#这种完全面向对象的高级语言中也可以用不安全的指针类型,即要用到unsafe关键字.在公共语言运行库 (CLR) 中,不安全代码是指无法验证的代码.C# 中的不安全代码不一定是危险的, ...
- 创建或打开解决方案时提示"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 ...
- 绑定一个值给radio
在ASP.NET MVC程序中,需要给一个radio list表绑定一个值. 下面是Insus.NET实现的方法: 使用foreach来循环radio每一个选项,如果值与选项的值相同,那这个选项为选中 ...
- 使用VS2015进行C++开发的6个主要原因
使用VS2015进行C++开发的6个主要原因 使用Visual Studio 2015进行C++开发 在今天的 Build 大会上,进行了“将你的 C++ 代码转移至 VS2015 的 6 个原因”的 ...
- Yii 2.x Behavior - 类图
yii\base\Component 继承这个类的类都具备扩展行为的能力
- 关闭firefox的plugincheck
每次打开firefox都弹出这个SB页面: https://www.mozilla.org/en-US/plugincheck/ 关不掉, 很是烦人. 经过地番google,找到了答案: about: ...
- FastDFS 安装及使用
FastDFS 安装及使用 2012-11-17 13:10:31| 分类: Linux|举报|字号 订阅 Google了一下,流行的开源分布式文件系统有很多,介绍如下: mogileF ...
- php注释规范
注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...