微信小程序css篇----背景(Background)与颜色(Color)
一。背景:background。设置对象的背景特性。一个元素可以设置多重背景图像,每组之间用逗号隔开,如果存在重叠关系,前面的背景图像会覆盖在后面背景图上。
1.background-color:指定背景的颜色。取值:正常的颜色取值。
2.background-image:背景图片。如果设置了这个属性,最好也添加下background-color ,用于当背景image不可见时保持与文本颜色有一定的对比度
3.background-repeat:设置对象背景图如何铺排填充。
repeat-x:背景在横向上平铺。
repeat-y:背景在纵向上平铺。
repeat:背景图在横向纵向上平铺。
no-repeat:图像不平铺。
round:背景图像自动缩放直到适应且填充整个容器。
space:背景图像以相同的间距平铺且填充满整个容器或者某个方向。
space:
round:
4.background-attachment:指定对象的背景图像是随对象内容滚动还是固定的。
取值:fixed:固定位置。scroll:相对于元素固定,跟着元素。local:相对于元素内容固定,总是跟着内容。
5.background-position:指定对象的背景图像位置。
取值:left,right,top,bottom,center。也可以用百分比。
6.background-size:指定对象的背景图像的尺寸大小。
取值:auto:背景图的真实大小。cover:等比例缩放到完全覆盖容器。有可能超出容器。
contain:将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等,始终都在容器内。
7.background-clip:指定对象的背景图像向外裁剪的区域。
取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。
border-box:从border区域(不含border)开始向外裁剪背景。
content-box:从content 区域开始向外裁剪背景。
text:从前景内容的形状做为裁剪区域向外裁剪。
8.background-origin:指定对象的背景图像显示的原点。
取值:padding-box:从padding区域(不含padding)开始向外裁剪背景。
border-box:从border区域(不含border)开始向外裁剪背景。
content-box:从content 区域开始向外裁剪背景。
二。颜色:color:设置对象的文本颜色。
可使用颜色名,rgb,hex,rgba,hsl,hsla,transparent等等来设置。
opacity:设置对象的不透明度。取值范围为0.0-1.0。
opacity:0.2
opacity:0.8
颜色名可参考:颜色参考链接
微信小程序css篇----背景(Background)与颜色(Color)相关推荐
- 微信小程序css篇----定位(position)
昨天2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是页面布局,所以后面将花一段时间将css的属性在小程序里过一篇, ...
- 微信小程序css篇----flex模型
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{displ ...
- 微信小程序css篇----1.边框(Border)
一.边框:border 设置对象边框的特性. 1.语法:border:length style color 2.style:none ,hidden,dotted,dashed,solid,doubl ...
- 微信小程序css篇----字体(Font)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站. 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "fo ...
- 微信小程序实战篇-商品详情页(二)
今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~ 这个布局难点是需要绘制一个阴影背景.弹出的动画 ...
- 前端微信小程序实战篇
电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 调用系统的API,系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
- 微信小程序实战篇-电商(一)
哈喽,大家好,端午节过的怎么样啊,代码君可是没休息,专心的写电商文章哦,也是蛮拼的,如果对代码君认可的话,欢迎点赞转发,你们的点赞转发是对我最大的支持!好啦,言归正传,我们今天要讲解微信小程序的实战篇 ...
- 微信小程序第二篇实战
title: 微信小程序第二篇实战 date: 2018-03-08 02:33:00 tags: WeChat category: WeChat description: 微信小程序第二篇实战 效果 ...
最新文章
- 树莓派安装samba共享文件
- pythondocx文档重叠_使用PYTHON实现docx文档的读写
- java连接ftp一直阻塞
- Project Euler 97 :Large non-Mersenne prime 非梅森大素数
- sql相同顺序法和一次封锁法_不到75行代码,导出最高法指导案例到excel(一)...
- 只要掌握了这条法则,你就有赚不完的钱
- PO、VO、BO、DTO、POJO、DAO之间的关系
- MySQL(6)-----数据类型
- ceb怎么转换成word_关于把CEB文件转换成word文档!!!
- ppt导出pdf后非矢量图图片失真的解决办法
- Android8.1 MTK平台 SystemUI源码分析之 Notification流程
- 【公司邮箱怎么注册】Foxmail帐户邮箱数据保存在什么地方?如何备份一个帐户?
- 模拟信号隔离转换模块0-10V0-5V转4-20mA0-20mA直流转换
- NT Server无盘站配置技术详解
- 我最有用的IntelliJ IDEA键盘快捷键
- 与python相关的考研专业-青岛大学2016年硕士研究生招生专业目录
- 金色多边形欧美融资商业计划书ppt模板素材
- 列举几个计算机网络应用的实例,计算机网络必备知识,举几个计算机网络应用的实例(一文搞懂)...
- 安科瑞基于物联网技术的智能电力抄表服务平台-Susie 周
- Python-多元线性回归方程比较最小二乘法与梯度下降法