时间戳

首页 > 解决方案 > 如何在内容后面显示背景图像？

css - 如何在内容后面显示背景图像？

问题描述

我正在使用 Visual Studio 创建一个聊天应用程序，并希望在主页和关于我们页面上添加背景图像，这两个页面都已经有一个导航栏，并且主页有一个框，用户可以在其中输入详细信息并加入聊天室我想在所有这些后面添加一张图片，我尝试使用不同的代码，但最接近的是这个：

HTML

<img src="image/friends.jpg" alt="image">

CSS

div {
  background: url('image/friends.jpg');
  background-size: cover;
  background-position: center;
}

但是图像未完整显示，它仅显示图像图标并删除了内容，请帮助

标签： cssbackground-imagebackground-positionbackground-size

解决方案

你不需要

<img src="image/friends.jpg" alt="image">

只需使用 CSS：

body {
  background-image: url("https://images.unsplash.com/photo-1542281286-9e0a16bb7366");
  background-size: cover;
  background-position: center; // if you want the image to be centered
}

或（见片段）

.bg {
  background-image: url("https://images.unsplash.com/photo-1542281286-9e0a16bb7366");
  background-size: cover;
  background-position: center; // if you want the image to be centered
}


.bg  {
  background-image: url("https://images.unsplash.com/photo-1542281286-9e0a16bb7366");
  background-size: cover;
  background-position: center;
}

div {
  height: 700px;
}
<div class="bg">
I am creating a chat app with visual studio and want to add a background image on the home page and about us page, both pages already have a nav-bar and the home page has a box where the user can enter details and join the chatroom and I want to add an image behind all of that, I tried using different codes but the one that came close is this one...
</div>

推荐阅读