2019-12-09

                                                    css背景

·css背景

Background-color 背景颜色

Background-image背景图片地址

Background-repeat是否平铺

Background-position背景位置

Background-attachment背景固定还是滚动

·背景的合写(复合属性)

background:背景颜色 背景图片 是否平铺 北京滚动 背景设置

Background:URL(图片地址)

Background-repeat:repeat-x-y(横铺竖铺)

·背景位置

语法:background-position:length||iength

Backround-position:position||position;

参数:

Length百分数1有浮点数字和单位标识符组成的长度值

Position:top(上)center(中)bottom(下)left(左)right(右)

说明:设置或检索对象的背景图片位置,必须先制定background-image属性。默认值为(0%0%)

如果指定一个值改值将用于横坐标,纵坐标默认为50%

如果指定两个值则为对角线

如果指定三个值则为上和左右

如果指定四个值则为四个角的值

注意:1.position后面是x坐标和y坐标可以使用名词或者精确单位

2.如果和精确单位和单位名字混合使用必须x坐标在前y坐标在后(实际工作中最用最大的就是北京鱼片居中对齐了)

[if !supportLists]3. [endif]如果方位名词只写一个,另外一个默认值为center

[if !supportLists]4. [endif]精确单位第一值一定是x坐标,第二只一定是y坐标

·背景附着

参数:scroll背景图像是随着对象内容滚动fixed背景图像固定

说明:设置或检测背景图像是随对象内容滚动还是固定的

公式:background-attachment:fixed

·背景简写

Background背景颜色、背景图片地址、背景平铺、背景滚动、背景位置

·背景透明

格式css支持背景透的写法 background:rgba(0,0,0,0-1)之间

注意:背景半透明是指盒子背景变透明内容不会受到影响,同样可以给文字边框甲乙透明效果都是rgba格式:

背景图片设置大小background-size:100px    我们尽量只改一个值防止自动缩放扭曲 建议使用百分比缩放

·多背景

以逗号分割可以设置多背景,可用于自适应布局做法就是都好隔开就好

[if !supportLists]1. [endif]一个元素可以设置多冲北京图像

[if !supportLists]2. [endif]魅族属性间使用都好分割

[if !supportLists]3. [endif]如果设置的多重背景图之间存在着交集前面的背景图会覆盖在后面的背景图之上

[if !supportLists]4. [endif]微辣避免背景色将图像盖住,背景色通常都定义在最后一组上

公式:back ground:图片路经+图片路经

·凹凸文字

根据亮度的阴影面积来制作凹凸文字

Text-decoration通常我们会给连接修饰效果

描述

None默认定义标准的文本

Underline定义文本的下一线条

Overline定义文本的一条线

Line-througe定义穿过文本地一条线

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容