英文:
Nativescript Background Image
问题
这里是HTML和CSS的翻译：
HTML部分：
我正在尝试使用CSS设置背景图像。我做错了什么？
这是HTML代码：
<Page backgroundImage="coverImage">
<GridLayout>
<!-- <page-router-outlet></page-router-outlet> -->
<Label textWrap="true" class="h1 text-center">
<FormattedString style="font-size: 35rem; font-weight: bold;">
<span text="Welcome to " style="color: white; left: 50%;"></span>
<span text="SmartHome" style="color: #F2E3BC;"></span>
</FormattedString>
</Label>
<!-- <Image row="1" col="1"></Image> -->
</GridLayout>
</Page>
CSS部分：
这里是CSS：
.coverImage {
background-image: url('~/assets/images/IntroductionBackgroundFirst.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
如果需要进一步的帮助，请随时告诉我。
英文:
I'm trying to put a background image using CSS. What am I doing wrong?
Here is the HTML:
<Page backgroundImage="coverImage">
<GridLayout>
<!-- <page-router-outlet></page-router-outlet> -->
<Label textWrap="true" class="h1 text-center">
<FormattedString style="font-size: 35rem; font-weight: bold;">
<span text="Welcome to " style="color: white; left: 50%;"></span>
<span text="SmartHome" style="color: #F2E3BC;"></span>
</FormattedString>
</Label>
<!-- <Image row="1" col="1"></Image> -->
</GridLayout>
</Page>
Here the CSS:
.coverImage {
background-image: url('~/assets/images/IntroductionBackgroundFirst.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
答案1
得分: 0
Sure, here's the translated content:
<Page class="coverImage">
<GridLayout>
<!-- Page content goes here -->
</GridLayout>
</Page>
通过在 <Page> 元素上添加 `class="coverImage"` 属性，您将应用 .coverImage 的 CSS 样式，并且在 CSS 中指定的背景图应该会正确显示。
请记得仔细检查背景图的路径是否正确，以及图像文件 `IntroductionBackgroundFirst.png` 是否位于与项目结构相对应的正确位置。
英文:
<Page class="coverImage">
<GridLayout>
<!-- Page content goes here -->
</GridLayout>
</Page>
By adding the class="coverImage" attribute to the <Page> element, you are applying the .coverImage CSS styles to it, and the background image specified in the CSS should be displayed correctly.
Remember to double-check that the path to the background image is correct and that the image file IntroductionBackgroundFirst.png is in the correct location relative to your project structure.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论