精华内容
下载资源
问答
  • 2020-03-04 13:55:07

    mounted() {
            document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6')
        },
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style')
        },

     使用上面的方式就可以为当前页面设置背景色了,mounted()在模板渲染成html后调用,beforeDestroy()销毁实例前调用

    更多相关内容
  • vue设置背景色时的坑

    2021-11-01 15:40:19
    使用vue的时候需要设置当前页面的背景色,但是你会发现当页面内容不够铺满整屏时 背景色不会铺满整屏 (红色为背景色) 这时候只需设置html body #app设置样式width: 100%;height: 100%; 设置当前页面 这样就能...

    使用vue的时候需要设置当前页面的背景色,但是你会发现当页面内容不够铺满整屏时 背景色不会铺满整屏

    (红色为背景色) 

    这是因为高度不够 所以我们需要设置样式 

    在App.vue里面设置

    html{
      width: 100%;
      height: 100%;
    }
    body{
      width: 100%;
      height: 100%;
    }
    #app{
      width: 100%;
      height: 100%;
    }
    
    ​

     然后在当前需要设置背景的页面设置

    <template>
      <div style="width: 100%; height: 100%; background-color: red;"></div>
    </template>
    
    ​

    这样就算没有内容时 背景色也能铺满整屏

    还有一种情况就是当内容超出屏幕时 滚动后面的内容会没有背景色

     这时候就只需要设置当前页的样式

    <template>
      <div style="width: 100%;min-height: 100%;background-color: red;"></div>
    </template>

    这样背景颜色就能正常显示了~~ 

    展开全文
  • VUE设置当前页面的背景色

    千次阅读 2021-10-20 09:29:41
    为了实现设置vue移动端背景色填充满屏幕,并且滑动屏幕同样设有颜色l 给body元素增加::before伪元素来实现这个效果,再给伪元素增加样式即可 例如: body::before{ content: ' '; position: fixed; z-index: -1; ...

    为了实现设置vue移动端背景色填充满屏幕,并且滑动屏幕同样设有颜色l在这里插入图片描述
    给body元素增加::before伪元素来实现这个效果,再给伪元素增加样式即可
    例如:

    body::before{
    	content: ' ';
    	position: fixed;
    	z-index: -1;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	background: red;
    	background-size: 100% auto;
    }
    

    照片代码为

    <template>
       <!--<div class="OrderList" v-for="(order,index) in orderList" :key="index">
    
    
       </div>-->
      <div class="body">
        <div class="OrderList">
          <div class="M_name">商店名:</div>
          <div class="O_state">是否支付:</div>
          <div class="U_picture">商品照片:</div>
          <div class="G_describe">商品介绍:</div>
          <div class="price">价格</div>
          <button class="deleteGoods" type="button">删除订单</button>
        </div>
        <div class="OrderList">
          <div class="M_name">商店名:</div>
          <div class="O_state">是否支付:</div>
          <div class="U_picture">商品照片:</div>
          <div class="G_describe">商品介绍:</div>
          <div class="price">价格</div>
          <button class="deleteGoods" type="button">删除订单</button>
        </div>
        <div class="OrderList">
          <div class="M_name">商店名:</div>
          <div class="O_state">是否支付:</div>
          <div class="U_picture">商品照片:</div>
          <div class="G_describe">商品介绍:</div>
          <div class="price">价格</div>
          <button class="deleteGoods" type="button">删除订单</button>
        </div>
        <div class="OrderList">
          <div class="M_name">商店名:</div>
          <div class="O_state">是否支付:</div>
          <div class="U_picture">商品照片:</div>
          <div class="G_describe">商品介绍:</div>
          <div class="price">价格</div>
          <button class="deleteGoods" type="button">删除订单</button>
        </div>
        <div class="OrderList">
          <div class="M_name">商店名:</div>
          <div class="O_state">是否支付:</div>
          <div class="U_picture">商品照片:</div>
          <div class="G_describe">商品介绍:</div>
          <div class="price">价格</div>
          <button class="deleteGoods" type="button">删除订单</button>
        </div>
        <div class="OrderList">
          <div class="M_name">商店名:</div>
          <div class="O_state">是否支付:</div>
          <div class="U_picture">商品照片:</div>
          <div class="G_describe">商品介绍:</div>
          <div class="price">价格</div>
          <button class="deleteGoods" type="button">删除订单</button>
        </div>
    
      </div>
    
    
    </template>
    
    <script>
        export default {
            name: "UserOrder"
        }
    </script>
    
    <style scoped>
    .body::before{
      content:'';
      position: fixed;
      z-index: -1;
      background-size: 100% auto;
      background-color:gainsboro;
      border: 1px solid red;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      padding: 0px;
      margin: 0px;
    
    }
    /*.body{
      position: absolute;
      background-color:gainsboro;
      border: 1px solid red;
      width: 100%;
      height: 100%;
    
      padding: 0px;
      margin: 0px;
    
    }*/
    .OrderList{
      border: 1px solid red;
      position: relative;
      width: 92%;
      height: 99px;
      top: 100px;
      right: 10px;
      left: 10px;
    
      background-color:ghostwhite;
      /*border: 2px solid white;*/
      margin-top: 20px;
      border-radius: 30px;
    }
    .M_name {
      position: relative;
      width: 100px;
      height: 3px;
      top: 3px;
      left: 5px;
      font-size: 10px;
      font-weight: bold;
      /* background-color: wheat; */
    }
    .O_state {
      position: relative;
      width: 100px;
      height: 3px;
      top: 0px;
      left: 190px;
      font-size: 10px;
      color: goldenrod;
      /* background-color: wheat; */
    }
    .U_picture {
      border: 1px solid #2c3e50;
      position: relative;
      width: 64px;
      height: 55px;
      top: 15px;
      left: 20px;
      font-size: 10px;
      /* background-color: wheat; */
    }
    .G_describe {
       position: relative;
       width: 99px;
       height: 55px;
       top: -42px;
       left: 100px;
       font-size: 10px;
       /* background-color: wheat; */
     }
    .price {
      position: relative;
      width: 30px;
      height: 55px;
      top: -95px;
      left: 220px;
      font-size: 10px;
      /* background-color: wheat; */
    }
    .deleteGoods {
      position: relative;
      width: 64px;
      height: 30px;
      top: -107px;
      left: 85px;
      font-size: 10px;
      border-radius: 30px;
      border:1px solid #CCC;
      /* background-color: wheat; */
    }
    </style>
    
    
    展开全文
  • 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);

     

    展开全文
  • 下面小编就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue实现背景更换颜色操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue设置背景占满全屏

    千次阅读 2021-06-26 21:55:58
    vue设置背景占满全屏 示例:如下图的顶部和左侧的空白区域: 解决背景图片占满全屏的问题如下: 1、首选要新建一个全局样式表global.css文件,代码如下: /* 全局样式表 */ html, body, #app { height: 100%; ...
  • 1、首先定义两个不同的 .null-input .el-input__inner { background-color: rgba(255, 255, 255, 0.8); color: #525661; font-size: 16px; } .no-null-input .el-input__inner { background-color: rgba(255, 255, ...
  • 主要介绍了用vue简单的实现点击按钮切换背景颜色,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue 设置页面背景色

    2021-07-24 09:32:18
    在最外层的<view>里,设置class如下 .bg{ position: fixed; height: 100%; width: 100%; background-color: #FFFFFF; }
  • vue页面背景颜色修改

    千次阅读 2022-05-18 16:58:58
    由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。 废话不多说直接上代码,亲测百分之百有效: <template&...
  • vue中动态设置背景渐变

    千次阅读 2022-03-28 15:44:07
    vue中动态设置背景渐变
  • vue设置body背景色

    千次阅读 2020-08-26 14:41:22
    戳这里>_<
  • vue表格根据属性值设置背景颜色vue表格设置鼠标悬浮背景颜色第一种方法:row-class-name第二种方法:cell-class-name第三种方法:(cell-class-name和row-class-name)都可以第一种方法代码第二种方法代码第三种...
  • 利用路由守卫来进行单独设置 beforeRouteEnter(to, from, next) { window.document.body.style.backgroundColor = "rgb(242,244,247)"; next(); }, beforeRouteLeave(to, from, next) { window.document.body....
  • 例子: 张三 那么出现的结果就是这样的,如下 就会出现底部留白,但是我想整个页面都改变颜色 此时还是单页面不能用body调配样式,所以 加上一行代码即可 position: fixed; 效果如下: 以上 收队
  • 1、我想给一个子页面单独设置一个背景颜色。 2、通过给body设置颜色后发现其他页面的颜色也变了。 3、然后通过scoped来限制css样式只在当前页面生效,设置scoped后body的背景色失效了。 4、然后我又给template内...
  • 2、在全局样式表common.css(自己起名字)中设置#app的高度为100%,再在所需页面设置#app的背景颜色 common.css中: html, body, #app{ height: 100%; margin: 0; padding: 0; } 组件中: #app { bac.
  • vue设置背景图片

    万次阅读 2022-03-30 19:36:33
    vue设置背景图片 在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 `#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-...
  • // 全局指令:背景色就会随机变:在任何组件内都可以使用 Vue.directive("bgc", { // 使用时给标签添加v-bgc就可以了 inserted(el) { let a = () => Math.floor(Math.random() * 256); el.style....
  • 下面我就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法,具有很好的参考价值,希望对大家有所帮助。例子:支付成功学车所需资料学车考照流程1.如果直接在css中设置body的background-color,会导致其他页面...
  • 今天小编就为大家分享一篇vue动态改变背景图片demo分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue设置背景图片的方式

    千次阅读 2021-07-09 11:04:26
    1、在data中声明背景图片相关配置 export default { data () { return { // 顶部导航背景图片配置 background: { // 背景图片地址 backgroundImage: 'url(' + require('../../../static/img/person/temp1.png...
  • vue设置全局背景图_vue开发使用笔记

    千次阅读 2020-11-21 14:30:13
    在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改...
  • vue中怎么修改单个页面body的背景色

    千次阅读 2021-12-13 16:38:37
    在需要修改body背景色的.vue文件里,写如下js代码 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy() { document.querySelector('...
  • vue单页面背景颜色修改

    千次阅读 2021-07-29 11:00:44
    最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色。 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的...
  • <div class="reverse-imgdiv" v-bind:style="{ background: activeColor }" 在setup里面修改activeColor即可

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,122
精华内容 8,448
关键字:

vue设置背景颜色