精华内容
下载资源
问答
  • 2021-03-11 22:46:53

    早期基本上设置 opacity: 0.7;background-color:#55585a   

    黑色背景透明,但是文字也跟着颜色淡了

    背景透明,文字不透明就是background-color:#55585a   +7a

    即background-color:#55585a+7a

    更多相关内容
  • vue 设置背景颜色及透明度

    万次阅读 2020-10-30 16:01:14
    如上图,如果是第一张图片,需要在左上角加上灰色背景,白色“封面”字样,背景色需要有透明度。 首先,需要知道rgba() 函数。 rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。 RGBA...

    如上图,如果是第一张图片,需要在左上角加上灰色背景,白色“封面”字样,背景色需要有透明度。

    首先,需要知道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);

     

    展开全文
  • 如何设置一个div的背景透明度,对于一些新手朋友有些陌生,接下来详细介绍实现方法,有需要了解的朋友可以参考下
  • /* 透明度为0,完全透明 */ opacity: .3; } .is-show { height: 150px; line-height: 150px; border-radius: 0; /* 透明度为1,就是不透明 */ opacity: 1; } 4、效果演示 4.1、微信小程序码 4.2、普通二维码 5、...


    1、HTML部分

    <div id="app">
    	<div class="transition-box">
    		<div :class="{transition: true, 'is-show': isShow}" @click="clickSwitch">
    			<span style="font-size: 27px; font-weight: 700;">点击切换</span>
    		</div>
    	</div>
    </div>
    

    以上代码需要引入以下文件:
    1、<link rel="stylesheet" href="./index.css">
    2、<script src="/node_modules/vue/dist/vue.js"></script>
    3、<script src="./index.js"></script>


    2、JavaScript部分

    new Vue({
    	el: "#app",
        data() {
            return {
                isShow: false,
            }
        },
    
        methods: {
            clickSwitch() {
                this.isShow = !this.isShow;
            }
        }
    });
    

    3、css部分

    .transition-box {
    	width: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .transition {
        width: 150px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        background-color: #E6A23C;
        border-radius: 30px;
        cursor: pointer;
        /* 过度 */
        transition: all 1s;
        /* 透明度为0,完全透明 */
        opacity: .3;
    }
    
    .is-show {
        height: 150px;
        line-height: 150px;
        border-radius: 0;
        /* 透明度为1,就是不透明 */
        opacity: 1;
    }
    

    4、效果演示

    4.1、微信小程序码

    2.0.2X


    4.2、普通二维码

    2.0.2P


    5、完整代码

    gitee(码云) - develop分支 - fadeInFadeOut 文件夹

    展开全文
  • vue动态绑定背景图片的透明度

    千次阅读 2019-11-08 10:32:00
    VUE项目中动态设置背景图的透明度时,重点是背景图的透明度,而不是背景颜色的透明度,,刚开始怎么也设置不上,写固定值的时候可以,所有就想为什么不能像动态绑定style一样呢??在网上查了大多的帖子,解决的都...

    在VUE项目中动态设置背景图的透明度时,重点是背景图的透明度,而不是背景颜色的透明度,,刚开始怎么也设置不上,写固定值的时候可以,所有就想为什么不能像动态绑定style一样呢??在网上查了大多的帖子,解决的都是背景颜色的透明度,也即是使用rgba,却没有动态设置背景图透明度的相关解答! 那么后来我是怎么解决的呢?

     

    很奇怪,这里需要使用魔板字符串,读取这个变量的值!

     :style="{background:'url('+searchConfig.topImg+')',opacity:`${$store.state.headerOpacity}`}"

    使用模板字符串,里面放上这个变量就可以了!我这里是从store里取的值,, 是不是很奇葩呢?

    展开全文
  • 【GIS】Vue修改图层透明度

    千次阅读 2019-01-29 15:20:00
    1、添加透明度控制条 <input id="slider" type="range" min="0" max="1" step="0.1" value="1" v-model="opacity" @input="changeOpactiy" > ...
  • 需求是这样的,有个标签,它的透明度随着进度的大小而改变,进度是0%-100%,对应的透明度是0.5-0,直接上代码 // 随着进度而变化标签的透明度 &lt;div class="shade" :style="{ background: '...
  • 父元素设置了透明度,子元素会继承其特性,但是有时子元素是不要透明度的或者透明度不一致的,此时可以将父元素中的透明度不设置,然后新建立一个与父元素一模一样的元素,将透明忒选哪个设置到这个“替代品”上,...
  • vue插件使用(一)

    2021-08-28 20:24:32
    wowjs 动画 安装: npm install wowjs --save -dev main.js中安装animate.css: import 'wowjs/css/libs/animate.css' ...在需要使用的文件中局部引入wowjs,并在mounted... name: 'Vue', data() { return {} }
  • "> 透明度: <el-input v-model="inputVal" placeholder="" style="width:100px" size="mini" ></el-input> % </div> ;" @click="handleInput" >确定...
  • 本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸灯</title> ...
  • 使用element-ui的滑块组件,并在滑块改变时触发entity透明度改变 export default { data() { return { value:50, rectangleAlpha:0.5, //矩形透明 shape:null, }; }, methods:{ //滑块归一化 formatTooltip(val){ ...
  • VUE3 实时监听页面滚动高度 ,改变nav/title的 透明度(分享写法,记录) data data() { return { scroll: "", percent: "", }; }, mounted mounted() { window.addEventListener("scroll", this.menu); }, ...
  • 设置背景颜色的透明度 if (scrollTop) { this.topNavBg.backgroundColor = `rgba(19, 23, 130, ${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置 } else if (scrollTop === 0) { ...
  • 获取16进制颜色之后转换成rgba颜色,然后设置rgba参数的第四个参数,透明度,子元素则不会继承 changeBgc(e) { let temColor = this.fromHex(this.changeColor(e.ddShiftCodeSource)); return { "background-...
  • vue登录框半透明写法

    2022-02-20 17:20:41
    <template> <div> <div class="background"> <img :src="imgSrc" width="100%" height="100%" alt=""/> </div> <div class="login_container" >...div class="login_box"&g.
  • 示例在SuperMap Objects.NET 6R中通过控制轴的滑动实现对影像图层的透明度的设置。
  • @阿乐今天敲代码没 文章目录效果图一、实现吸顶 效果图 好几天没更新了,做一个小demo吧。导航栏吸顶,以及随页面滚动实现渐变色 吸顶前: ...Vue中data内容: data() { return { navBarFixed: false,
  • 背景设置透明度字体不透明

    千次阅读 2016-09-26 09:42:30
    如果想将背景设置透明度,但是又要保证其中的字体透明度不变,可以通过background属性background:rgba(255,255,255,0.6);来设置,背景透明度为0.6,字体透明度不变。
  • 设置opacity为0 ,这个时候不透明度为0(就是透明) .dpn-enter-active这个类全程都会在, 所以给他添加一个transition属性,来监听opacity这个属性 当.dpn-enter这个类被移除的时候,opacity这个属性的值就变回了它...
  • vue-colorPicker 基于vue的轻量颜色选择器
  • /**表格背景透明 */ /*透明化整体*/ .table-a /deep/ .el-table, .el-table__expanded-cell { background-color: transparent !important; } /*透明化行、单元格,删除表头下横线*/ .table-a /deep/ tr, .table-a /...
  • CSS 不透明度 / 透明度

    2022-02-22 11:40:39
    opacity属性指定元素的不透明度/透明度。 透明图像 opacity 属性的取值范围为 0.0-1.0。值越低,越透明: 透明悬停效果 opacity 属性通常与 :hover 选择器一同使用,这样就可以在鼠标悬停时更改不透明度: ...
  • 一般在常规的组件之间 的事件数据传递大多都是以 ...其实这样本质上并没有错 也完全符合 常规的vue编程逻辑但是随着版本的更新为了更加便捷vue 提出了一个新的概念 完全透明的包裹器$listeners $attrs 实现父子组...
  • 导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }"> <img src="@/images/home/icon_jdjr.png" v-bind:class="{ 'scrollFlag': scrollF...
  • import jsPDF from 'jspdf' new jsPDF() const pageHeight = pdf.getPageHeight() // 获取当前页的高度 pdf.saveGraphicsState() // 保存图形状态 pdf.setGState(pdf.GState({ opacity: 0.3 })) // 设置透明度为0.3 ...
  • 所以这里opacity设置为1,其透明度仍然是0.5*1=0.5,(注意opacity的值为0-1,所以不能通过设置opacity为2来使透明度为1) 解决方案: 父元素设置背景使用rgba的形式来代替背景色+opacity: rgba()前三位用来指定...
  • Vue 设置button的背景色为透明

    千次阅读 2019-09-22 13:06:36
    在设置样式时使用 background-color: unset 3.1.0 是设置了背景色的 登录是没有设置背景色的
  • 前言给大家分享一下,如何为VS2017设置透明背景图。下面是一张设置前和设置后的图片。设置前:设置后:二.设置背景图片的扩展程序我们打开VS的扩展安装界面:【工具】->【扩展和更新】->【联机】,输入 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,067
精华内容 2,826
关键字:

vue透明度