vue 选中背景高亮(vue 如何设置背景颜色及透明度)
类别:编程学习 浏览量:2676
时间:2021-10-23 10:25:45 vue 选中背景高亮
vue 如何设置背景颜色及透明度背景颜色及透明度设置如上图,如果是第一张图片,需要在左上角加上灰色背景,白色“封面”字样,背景色需要有透明度。
首先,需要知道rgba() 函数。
rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。
- 红色(R)0 到 255 间的整数,代表颜色中的红色成分。。
- 绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
- 蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。
- 透明度(A)取值 0~1 之间, 代表透明度。数值越小,透明度越高。
下面上vue代码:
首先设置父级元素位置position: relative;然后设置子元素位置position: absolute;通过设置left、right、top、bottom来调整位置,然后设置背景色background:rgba(34,34,34,0.5);
设置button的背景色为透明色在设置样式时使用
background-color: unset
3.1.0 是设置了背景色的
登录是没有设置背景色的
以上为个人经验,希望能给大家一个参考,也希望大家多多支持开心学习网。
您可能感兴趣
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue应用转flutter(Vue和Flask通信的实现)
- vue引入axios(vue封装axios的几种方法)
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue动态列表布局(vue项目实现左滑删除功能完整代码)
- vue 排班安排(vue实现钉钉的考勤日历)
- vue-router的两种模式(vue-route路由管理的安装与配置方法)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- 通过体温就能为智能手表充电 原来是用NASA在空间站用的黑科技(通过体温就能为智能手表充电)
- 智能手表兼容Windows和Android 无需充电挑战苹果(智能手表兼容Windows和Android)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
热门推荐
- mysql存储过程遍历数据(Mysql 存储过程中使用游标循环读取临时表)
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- pandas怎么写入csv文件(Pandas读写CSV文件的方法示例)
- 阿里云ubuntu系统(阿里云ubuntu16.04如何搭建pptpd服务)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- iis6双php版本的设置(云主机IIS7.5支持PHP5.3以上版本和MYSQL)
- dedecms点赞功能怎么做呢(dedecms自定义表单添加发布时间功能的方法)
- tornado异步编程(Tornado Web服务器中处理空白字符的解决方案)
- eclipse配置python(eclipse创建python项目步骤详解)
- JavaScript生成GUID的方法