具有两种背景颜色的body元素

Question

我用类绑定给了 body 元素红色值背景颜色，并在样式上将其设置为白色。我唯一想要的就是用我的 vue 控制背景颜色，但它不是全高。

export default {
    data(){
        return{
             text : 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse voluptatibus dolores rerum excepturi corporis nisi odit minus earum adipisci non laboriosam deserunt autem architecto molestias, explicabo provident laborum omnis accusantium!',
        
             author:'',
             backgroundcolor:'#16a085',
        }
    
    
    },

html, 
body {
    margin: 0;
    padding: 0;
    background-color:white;
}

.background{
    background-color: red
}

#wrapper{
   
    width: 650px ;
    min-height: auto;   
    background-color: rgb(198, 241, 200);
    margin: 0 auto;
    margin-top: 200px;
    border-radius: 10px;
}
.btn{
    position: relative;
    
    left:6px;
    margin: 10px;
    
}
#text{
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    padding: 10px;
    margin:30px;
    padding-top: 20px;
}
#icon{
    font-size:35px;
    margin:5px;
    padding-top:20px;
}
#twitter{
    background-color: rgb( 0, 172, 237)
}
#author{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    left :400px;
    font-weight: bold;
    font-size: 20px;
}

<html>
   
 <body :class="{ background: backgroundcolor }"> 
<div id='wrapper'>  
      <p id="text"><i id='icon' class="fas fa-quote-left"> {{text}}</i></p>
       <span id='author'>- {{author}}</span>
       <button id='twitter' class="btn"><i class='fab fa-twitter'></i></button>
       <button  v-on:click="changeWidth()" @click="start " class="btn btn-success">New Quote</button>
   </div>
 </body>
</html>

Answer 1

好吧，如果你希望背景颜色为红色，那么只需这样简单地添加类即可，

<body class="background"> 
.background {
    background-color: red;
    height: 100%;
    width: 100%;
    }

这是我从你试图质疑的内容中了解到的？如果您能更具体地解释您的需求，那么我想我可以为您提供更多帮助？或者添加相同的内容 'html,正文{}' 样式而不是单独的类。

Answer 2

您正在向下拉身体，因为您在包装纸上设置了顶部边缘。要解决这个问题，只需将其包装在另一个需要填充的 div 中即可。也让你的身材100%。看看下面的小提琴：

body: {height: 100%}

https://codepen.io/nielsvhb/pen/oQLZVQ

Answer 3

如何为我的身体添加多种颜色以防万一？

具有两种背景颜色的body元素

问题描述投票：0回答：3

3个回答

最新问题

具有两种背景颜色的body元素

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3