Css背景及应用(2019-12-09)

css背景(background)

background-color(背景颜色)

background-repeat(是否平铺)

repeat-x:背景图像横向平铺

repeat-y :背景图像纵向平铺

no-repeat:背景图像不平铺

background-image(背景图片地址)

background-position(背景位置)

background-attachment(背景固定还是滚动)

scroll(滚动) fixed (固定的)

"背景位置"(position)

background-position:length || length background-position : position || position

参数:

length:百分数| 由浮点数字和单位标示符组成的长度值

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

利用方位名词top bottom 来更改背景图片的位置

background-position

精切单位第一个值一定是x(水平)第二个值是y(垂直)

混搭:center 15px;

背景简写:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景透明:background:rgba(0,0,0,0.3);

背景缩放:background-size: 宽度 高度

注意:尽量只改一个值防止缩放时针扭曲

background-size:50% /*把背景图片缩放为原来的一半大小*/

background-cover; 图片会进行等比例缩放 图片保证满背景区域,如有溢出则会被隐藏

background-contain;会自动进行等比例缩放 保证图片完全显示在背景区域

多背景:用逗号分割

一个元素可设置多重背景图像

每组属性间用逗号分割

如果设置的多重背景图之间存在着交集(即存在着重叠关系)前面的背景图会覆盖在后面的背景图之上

为了避免背景色将图像遮住,背景色通常都定义在最后一组上

text-decoration: none;  取消下划线

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