Я добавил изображение, но не появился - PullRequest
0 голосов
/ 25 апреля 2020

Я добавил изображение, но оно не отображается на сайте. В веб-выражении 4 отлично работает. Я добавил синий фон и хочу иметь синий фон. Он отлично работает в среде w3school,

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Почему на моем изображение сайта не кажется?

<!DOCTYPE html>
    <html>

    <head>

    <title>ME</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    </head>

    <body>

    <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
      <div class="w3-display-topleft w3-padding-large w3-xlarge">
        Logo
      </div>
      <div class="w3-display-middle">
        <h1 class="auto-style2">Me</h1>
        <hr class="w3-border-grey" style="margin:auto;width:40%">
        <p class="w3-large w3-center">Personal Informations</p>
      </div>
      <div class="w3-display-bottomleft w3-padding-large">
        Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">me</a>
      </div>
    </div>
    <p><img alt="forestbridge" height="963" src="forest%20bridge.jpg" width="1642"></p>
    </body>
    <style type="text/css">
    body {
      background-color: blue;
    }
    .auto-style1 {
        margin-right: 663px;
    }
    body,h1 {font-family: "Raleway", sans-serif}
    body, html {height: 100%}
    .bgimg {
      background-image: url('/w3images/forestbridge.jpg');
      min-height: 100%;
      background-position: center;
      background-size: cover;
    }
    .auto-style2 {
        color: #000;
        font-family: "Segoe Print";

    }
    </style>

Ответы [ 3 ]

0 голосов
/ 25 апреля 2020

изменить
background-image: url('/w3images/forestbridge.jpg'); на
https://www.w3schools.com/w3images/forestbridge.jpg
вы должны использовать абсолютный путь для внешних ресурсов.

0 голосов
/ 25 апреля 2020

Вам необходимо указать полный путь к изображению. Измените «/w3images/forestbridge.jpg» в вашем css .bgimg классе на «https://www.w3schools.com/w3images/forestbridge.jpg», и я не уверен, какова цель добавления <p><img alt="forestbridge" height="963" src="forest%20bridge.jpg" width="1642"></p>, потому что это кажется избыточным, так что попробуйте удалить его или поменять на другое изображение.

0 голосов
/ 25 апреля 2020

body {
      background-color: blue;
    }
    .auto-style1 {
        margin-right: 663px;
    }
    body,h1 {font-family: "Raleway", sans-serif}
    body, html {height: 100%}
    .bgimg {
      background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
      min-height: 100%;
      background-position: center;
      background-size: cover;
    }
    .auto-style2 {
        color: #000;
        font-family: "Segoe Print";

    }
<!DOCTYPE html>
    <html>

    <head>

    <title>ME</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    </head>

    <body>

    <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
      <div class="w3-display-topleft w3-padding-large w3-xlarge">
        Logo
      </div>
      <div class="w3-display-middle">
        <h1 class="auto-style2">Me</h1>
        <hr class="w3-border-grey" style="margin:auto;width:40%">
        <p class="w3-large w3-center">Personal Informations</p>
      </div>
      <div class="w3-display-bottomleft w3-padding-large">
        Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">me</a>
      </div>
    </div>
    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...