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样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解 发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
- CSS样式优先级顺序详解
CSS样式优先级详解 这里有一篇对CSS样式的优先级顺序进行解释的,讲的挺详细的,写的不错.大家可以参考这一篇: https://juejin.im/post/5f0eae715188252e3c4d ...
- (转)CSS样式表继承详解
什么是css 继承? 要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在 ...
- CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解 如果,说浮动, 关键在一个 "浮" 字上面, 那么 我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
- CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题 比如 border: 0xp solid #fff;两个浏 ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- html 自定义打印模板,HTML+CSS入门 自定义模板详解
本篇教程介绍了HTML+CSS入门 自定义模板详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯, ...
最新文章
- 华为AR28-11路由器配置
- 2021年春季学期-信号与系统-第二次作业参考答案-第十小题
- Android之利用ColorMatrix进行图片的各种特效处理
- Xcode错误“找不到开发人员磁盘映像”
- pythoning ——3、数据类型(字符串)
- mysql ubb html_UBB中轻松实现歌词同步播放_html
- matlab连续型随机变量,matlab连续型随机变量的分布.doc
- C语言 #pragma once - C语言零基础入门教程
- HBase EndPoint加载失败
- 使用 Solr 构建企业级搜索服务器
- [原创]差分放大器阻抗匹配计算+阻抗计算小工具
- 按键精灵和python功能对比_AutoIt3和按键精灵的功能对比第2/2页
- python编程单词排序_Python:对输入的单词进行字典序排序输出
- 内网远程控制安卓设备软件推荐
- 学习python:练习2.投资理财计算器
- 狼性教育——让孩子成为主宰命运地强者
- proc 文件的创建和读写
- (附源码)springboot闲置衣物捐赠系统 毕业设计 021009
- WPF实现纵向显示TabControl标题及标题字体样式
- windows 任务相关 删除任务