Question

我有一个php页面，我无法将图像设置为完整的背景图像。图像甚至没有显示。我的代码如下：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* The image used */
    background-image: url("bg.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<div class="bg"></div>

<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

＆＃13;

我该怎么做？

Answer 1

将background属性设置为body {}或使用div作为全屏元素：

＆＃13;

.bg {
  /* The image used */
  background-image: url("//placehold.it/1000?text=Backrgound+Image");
  /* Full height */
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<div class="bg"></div>

＆＃13;

或者摆脱整个<div>并在body上使用它：

＆＃13;

body {
  /* The image used */
  background-image: url("//placehold.it/1000?text=Background+Image");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

Answer 2

删除maxantonov : ~/passbolt .$ cat dc.yml version: '3.4' services: db: image: alpine:latest container_name: db hostname: db env_file: - env/mysql.env command: ["printenv"] maxantonov : ~/passbolt .$ docker-compose -f dc.yml up Starting db ... done Attaching to db db | PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin db | HOSTNAME=db db | MYSQL_ROOT_PASSWORD=test db | MYSQL_DATABASE=passbolt db | MYSQL_USER=passbolt db | MYSQL_PASSWORD=P4ssb0lt db | HOME=/root db exited with code 0并将正文放到它上面。它会将图像放在你的html全身背景中。

.bg

Answer 3

添加/更新了这些样式

.bg {
    /* The image used */
    background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHQArgMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAAAQIDB//EABsQAQEBAAIDAAAAAAAAAAAAAAABEUFhITHR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APUBWQAAAAEAAAAAFggCqgCrrKg0sZXQbla1zlalBzqLUARQEAARUAVIoIAAKAAAAAqoA1Pa6ySgVFQAABFAQwAAAAAEUAAAogCggNCRQVFQAWoAAAAACAAAAAJ2KCC4gCoAsEUGgAEUBDFATEUAMAEFAQUBBUAAARQBBQaBAUQBUAAABUUBFAQUBBQERozsGRcAZVQAZUFENBRAFBAUQBVRAWBUBU4D6CmoUF01AAQAAAABQAWIAFgALwgAtQAIVAFnmbQAEAAoA//Z");

    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
 p {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
 }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
    height: 100%;
    margin: 0;
    position: relative;
}

.bg {
    /* The image used */
    background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHQArgMBIgACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAAAQIDB//EABsQAQEBAAIDAAAAAAAAAAAAAAABEUFhITHR/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APUBWQAAAAEAAAAAFggCqgCrrKg0sZXQbla1zlalBzqLUARQEAARUAVIoIAAKAAAAAqoA1Pa6ySgVFQAABFAQwAAAAAEUAAAogCggNCRQVFQAWoAAAAACAAAAAJ2KCC4gCoAsEUGgAEUBDFATEUAMAEFAQUBBUAAARQBBQaBAUQBUAAABUUBFAQUBBQERozsGRcAZVQAZUFENBRAFBAUQBVRAWBUBU4D6CmoUF01AAQAAAABQAWIAFgALwgAtQAIVAFnmbQAEAAoA//Z");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
 p {
position: absolute;
top: 0;
left: 0;
z-index: 1;
 }
</style>
</head>
<body>

<div class="bg"></div>

<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

＆＃13;

无法将图像设置为背景

3 个答案: