web -- 背景图片及文字
背景图片相关
1） 设置背景图片
background-image : url("路径")设置背景图片，指定图片路径，如果路径中出现了中文或空格，需要加引号
2） 设置背景图片的重复方式
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
1 如果元素尺寸大于图片尺寸，会自动平铺，直到铺满整个元素
2 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
background-repeat:repeat/repeat-x/repeat-y/no-repeat取值：
- repeat：默认值，沿水平和垂直方向重复平铺
- repeat-x：沿x轴重复平铺
- repeat-y：沿y轴重复平铺
- no-repeat：不重复平铺
3） 设置背景图片的显示位置
默认显示在元素左上角
background-position:x y;取值方式：
1. 像素值：设置背景图片的在元素坐标系中的起点坐标
2. 方位值：
- 水平：left/center/right
- 垂直：top/center/bottom
- 注： 如果只设置某一个方向的方位值，另外一个方向默认位center
4） 设置背景图片的尺寸
background-size: width height;取值方式：
1. 像素值
- 500px 500px; 同时指定宽高
- 500px; 指定宽度，高度自适应
2. 百分比
百分比参照元素的尺寸进行计算
- 50% 50%; 根据元素宽高，分别计算图片的宽高
- 50%；根据元素宽度计算图片宽高，图片高度等比例缩放
背景属性简写
background: color url("") repeat postion;注意：
- 如果需要同时设置以上属性，遵照相应顺序书写
- background-size 单独设置
文本属性
1.字体相关
1） 设置字体大小：
font-size:20px;2) 设置字体粗细程度
font-weight: normal;取值：
- normal（默认值）等价于400
- bold （加粗） 等于700
3) 设置斜体
font-style: italic;4) 设置字体名称
font-family: Arial, "黑体";取值：
- 可以指定多个字体名称作为备选字体，使用逗号隔开
- 如果字体名称位中文，或者名称中出现了空格，必须使用引号
5） 字体属性简写
font: style weight size family;注意：
- 如果四个属性都必须设置，严格按照顺序书写
- size family 是必填项
2 文本样式
1） 文本颜色
color:red;2) 文本装饰线
text-decoration: none;取值：
- underline 下划线
- overline 上划线
- line-through 删除线
- none 取消装饰线
3） 文本内容的水平对齐方式
text-align: center;取值：
- left(默认)：左对齐
- center：居中对齐
- right ：右对齐
line-height: 30px;使用：
文本在当前行中永远居中，可以借助行高调整文本在元素中的垂直显示位置
- line-height=height：设置一行文本在元素中垂直居中
- line-height>height：文本下移显示
- line-height<height ：文本靠上显示
特殊：line-height可以采用无单位的数值，代表当前字体大小的倍数，以此计算行高
web -- 背景图片及文字相关推荐
- IOS设置导航栏的背景图片和文字
IOS设置导航栏的背景图片和文字 - (void)viewDidLoad {[super viewDidLoad];[self.navigationBar setBackgroundImage:[UI ...
- python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
- 如何实现背景/背景图片透明文字不透明
如何实现背景/背景图片透明文字不透明 第一种情况,背景为自定义颜色 第二种情况,背景为图片 总结: 第一种情况,背景为自定义颜色 直接给父级背景颜色设置background:rgba();就可以了: ...
- python设置背景图片大全_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
- python中mainloop添加背景_Python实例讲解 tkinter canvas (设置背景图片及文字)
Python实例讲解 tkinter canvas (设置背景图片及文字) 2018-09-14 Python实例讲解 -- tkinter canvas (设置背景图片及文字) 博客分类:Pytho ...
- CSS浮动+背景图片+边框+文字排版+段落设置
一.CSS浮动 1.简介 默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值 说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动浮动意 ...
- CSS实现背景图片透明文字不透明效果的两种方法
网页设计中经常要在背景图上放一些文字介绍,这就需要背景图片能有透明效果以便突出显示文字信息,经多方查阅,终于找到了2种有趣的方法. 1.在文字层添加rgba样式实现半透明效果 方法: 背景图片层添加样 ...
- css背景上能添加文字,如何利用div+css来给背景图片上文字布局
这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...
- html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
- php 如何给字体加颜色,怎么给字体加背景图片？如何给文字填充图片背景色？怎么给字体加背景图片？文字加背景图...
下了两天的雨,今天终于放晴了,而且还是阴天的天气,有微风,没有热辣的太阳,这让小编不禁感到了一股秋的凉意呢~啊哈哈哈,好啦,还是不说废话了,来看看今天的教程方案吧!平时我们制作纯文字的图片画面,文字的 ...
最新文章
- 【转载】并发数据结构
- GraphQL和REST对比时需要注意些什么
- 九十四、一文带你玩转简单的flask
- mysql统计各年龄段的数量
- luogu Cantor表
- idea 配置J2EE
- 4.深入分布式缓存:从原理到实践 --- Ehcache 与 Guava Cache
- 狂神说Redis笔记三
- 编辑距离及编辑距离算法 1
- 三星滑盖手机java游戏_三星滑盖手机大全简介
- PSPNet运行及训练
- Excel如何对多分隔符号数据进行分列
- id 查找apple,怎么查找我的apple id？
- 3分钟搞定下载微信视频号视频！无需第三方软件，亲测有效！
- maven出现错误 大难题-------
- 【JVM技术专题】深入分析CG管理和原理查缺补漏「番外篇」
- MySQL数据库管理员用户密码忘记了怎么办？
- 2020年全球救市两种方法的分析，从世界高度来理解富人思维
- Spring Cloud Alibaba微服务架构实战教程—07集成knife4j生成Api文档
- 【大厂面试】三面三问Spring循环依赖，请一定要把这篇看完（建议收藏）