我正在尝试将背景图像添加到我的vue.js项目中 [英] I am attempting to add a background image to my vue.js project
问题描述
我想添加一个覆盖整个页面的背景图像.但这是现在的样子:
I want to add a background image that covers the whole page. However this is how it looks now :
我希望它能覆盖整个网页.在vue.js中将如何完成?
I want it to span the whole web page. How would this be done in vue.js?
我还想要一个动画的工具栏，以便在页面不滚动时该工具栏是透明的，并具有背景图像的外观.滚动时，工具栏将具有当前的蓝色
I also want an animated toolbar so that when the page is not scrolling the toolbar is transparent and takes the look of the background image. When it scrolls the toolbar will have the current blue color
这是我的小提琴
这是HTML
<template>
<div id = "background">
<div class = "" id = "explain">
<h1 class = "md-title">{{ message }}</h1>
<h3> Collect, analyse and do better with data!</h3>
</div>
<hr>
<md-layout id = "container">
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
<span class="md-headline">HOW does levi function ?</span>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
<h3>levi uses research and experimentation to provide
'actionable knowledge' that you can use to <b>do well </b>in your environment. </h3>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33">
<h4> Identify and Collect what is needed</h4>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33">
<h4> Organize and analyse the evidence</h4>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33">
<h4>Communicate and act on the evidence! </h4>
</md-layout>
</md-layout>
<md-layout id = "Identity">
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
<span class="md-headline"> HOW do we exist?</span>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
Our team realized that many institutions are unable to deconstruct their environment and respond to its need because; they do not have the
cost effective products, proper processes , and the necessary execution techniques required to do so.
<p>levi has been built to provide the platform and process necessary to help those in need <b>do well.</b></p>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
<span class="md-headline">WHAT do we do?</span>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
Our community combines products and processes to augment human intelligence, reduce waste, and provide wellbeing.
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
<span class="md-headline"></span>
</md-layout>
<md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
</md-layout>
</md-layout>
</div>
</template>
这是CSS
<style scoped>
h1 {
font-family: Helvetica neue;
text-align: center;
font-weight: 400;
font-size: 49px;
line-height: 1.1em;
font-family: Heiti SC;
}
h2 {
font-family: Helvetica neue;
text-align: center;
font-weight: 600;
font-size: 19px;
}
h3 {
font-family: Helvetica neue;
text-align: center;
font-weight: 300;
font-size: 19px;
}
h4 {
font-family: Helvetica neue;
text-align: center;
font-weight: 300;
font-size: 19px;
}
#Identity > .md-layout {
/*background-color: lightgrey;*/
border-color: black;
align-items: center;
justify-content: center;
/*border-style: dotted;*/
border-width: 1px;
padding: 8px;
font-weight: 200;
font-size: 20px;
line-height: 1.4em;
}
span {
font-family: Helvetica neue;
}
THIS是用于渲染背景的css语法.
THIS is the css syntax for rendering the background.
#background {
background: url(../../assets/whiteCoffeedarken.jpg);
}
#container > .md-layout {
/*background-color: lightgrey;*/
border-color: black;
align-items: center;
justify-content: center;
/*border-style: dotted;*/
border-width: 1px;
padding: 8px;
}
</style>
推荐答案
我不同意这些评论.这实际上是关于Vue.js的真实问题.:)
您使用的是单个文件组件，所以我想您是使用 vue-cli 和 webpack 模板...
You are using single file components, so I suppose you created your project with vue-cli and the webpack template...
如果打开 Vue.js开发工具，则可以检查组件.确定它们的视觉范围特别方便.
If you open your Vue.js devtools, you can inspect your components. This is particularly handy to determine their visual limits.
所有组件，包括 App.vue ，都被注入到您的 index.html 中，并且在某种程度上具有独立的存在.因此，如果您要为主体设置完整的背景图像，而不仅仅是为其中的特定组件设置背景图像，则有两个主要选择:
All components, including App.vue, are injected into your index.html and have, to some extent, an independent existence. So if you want to set a full background image for the body, not just for a specific component inside of it, you have two main options:
- 创建静态样式表
- 将样式规则放入
App.vue
静态样式表
创建一个 style.css 文件，并将其放入 static 文件夹中.在这里，Webpack将不会对其进行处理.在此文件中，您可能具有以下代码:
Static stylesheet
Create a style.css file and put it in the static folder. Here, it will not be processed by Webpack. In this file, you could have the following code:
body {
background-image: url('background.jpg');
}
打开您的 index.html 并包含您的样式表:
Open your index.html and include your stylesheet:
<link rel="stylesheet" href="/static/style.css">
App.vue
中的样式规则使用此解决方案，您可以将以下代码放入 App.vue 的样式部分:
body {
background-image: url('background.jpg');
}
但是，您必须删除 scoped 属性！
However, you have to remove the scoped attribute!
说明在 vue-loader文档中:
当标签具有scoped属性时，其CSS将仅应用于当前组件的元素.
When a tag has the scoped attribute, its CSS will apply to elements of the current component only.
这篇关于我正在尝试将背景图像添加到我的vue.js项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
