Фоновые изображения в HTML, но не в CSS - PullRequest
Новая
       75

Фоновые изображения в HTML, но не в CSS

1 голос
/ 20 июня 2020

Прошел онлайн-курс программирования и полностью застрял на этом бите. Пробовали то же самое в Brackets / Atom / Sublime, и все делают то же самое. Я могу просмотреть изображение без проблем, если оно вызывается в src = "" в html, но попытка вызвать его как фоновое изображение в CSS (внутреннее или внешнее) всегда будет давать альтернативный текст.

У меня есть копии изображения во всех каталогах, чтобы помочь ему найти его, и я пробовал варианты ..// \ "" '' et c.

Любая помощь, пожалуйста! Я не могу двигаться дальше, пока не решу это. Это изображение показывает превью, которую я получаю: ссылка на изображение

Код ниже: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TEST CSS IMAGE LOCATOR</title>
  <style>
    #Maddie {
      height: 400px;
      width: 250px;
      background-image: url('bluebulletpoint.JPG');
      background: radial-gradient(circle, black, white);
    }
  </style>
</head <body>
<p>This is a picture of Maddie:</p>
<div id="Maddie">
  <img alt="missing picture" </div>
  <br><br>
  <div id="thisworks">
    <img src=bluebulletpoint.JPG>
  </div>
  </body>

</html>

Ответы [ 3 ]

0 голосов
/ 20 июня 2020

Проблема в следующем: 

      background-image: url('bluebulletpoint.JPG');
      background: radial-gradient(circle, black, white);

Вторая строка - это CSS сокращенная форма, которая по правилу полностью перезаписывает предыдущую строку. Переместите его перед первой строкой, тогда все будет в порядке. Когда вы закончите, удалите img с надписью «отсутствует изображение», в этом нет необходимости.

0 голосов
/ 20 июня 2020 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TEST CSS IMAGE LOCATOR</title>
</head>

<style>
  #Maddie{
      background-image: url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  }
  img{
  height :100px;
  width :100px:
  
}
</style>
<body>
<p>This is a picture of Maddie:</p>
<div id="Maddie">
  <img alt="missing picture" src="https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/preview_image/animate-bird-preview.jpg">
  </div>
  <br><br>
  <div id="thisworks">
    <img src=https://i.ytimg.com/vi/ryUxrFUk6MY/maxresdefault.jpg>
  </div>
  </body>

</html>
0 голосов
/ 20 июня 2020

Это максимум, что я могу предложить: 

 <body>
        <p>This is a picture of Maddie:</p>
        <div style="background-image:url('bluebulletpoint.JPG'); background: radial-gradient(circle, black, white);height: 400px;
            width: 250px;" id="Maddie">
   
        </div>
        <br><br>
        <div id="thisworks">
              <img src=bluebulletpoint.JPG>
        </div>
    </body>
Вам не нужно <img> в вашем div, если он находится в фоновом режиме.
...