Фоновое изображение не отображается, несмотря на то, что оно установлено в консоли браузера - PullRequest
Новая
       0

Фоновое изображение не отображается, несмотря на то, что оно установлено в консоли браузера

0 голосов
/ 09 февраля 2019

Мне нужно установить фоновое изображение, используя PURE javascript (без JQuery или других библиотек).

Я установил фоновое изображение, используя JavaScript, показанный ниже.Консоль Firefox, сетка инспекторов и движок CSS показывают, что фоновое изображение такое, каким оно должно быть.Я успешно установил цвет фона, показывая, что элемент не скрыт, и я не выбираю неправильный элемент.Как показывает код ниже, я попытался поиграть с непрозрачностью и цветом фона.Это было бесплодно.При наведении курсора на URL изображения Firefox показывает, что изображение действительно загружено правильно.

Вот мой javascript: 

var shadow = document.getElementById("shadow");
shadow.style.backgroundColor = "transparant";
shadow.style.opacity = "1";
shadow.style.backgroundImage = image;

CSS, примененный к элементу при запуске программы 

div#shadow
{
    opacity: 0;
    position: absolute;
    top: 315px;
    left: 721px;
    width: 48px;
    height: 48px;
}

Элемент - это просто div, вложенный в <body>

<html>
    <body>
        <div id="shadow"></div>
    </body>
</html>

Ответы [ 4 ]

0 голосов
/ 09 февраля 2019

Можете ли вы предоставить свой "имидж" вар?Я заменил ваш var на URL, и он работал нормально. 

shadow.style.backgroundImage = "url('http://placehold.it/300x300')";

Кроме того, попробуйте добавить некоторые свойства фона с помощью CSS, возможно background-size.

0 голосов
/ 09 февраля 2019

Для свойства style.backgroundImage вам нужен путь к изображению, например "url('image.png')".В противном случае присвойте URL-адрес изображения переменной image.

0 голосов
/ 09 февраля 2019

Ты слишком много делаешь здесь.opacity или transparent или backgroundColor не требуется.Просто установите background на изображение.

Но в CSS всякий раз, когда вам нужно указать путь для свойства, вам нужно передать этот путь с помощью функции url(), которую вы, похоже, не делаете.

// Best practice: don't set individual properties on the 
// style of an element. Add/remove pre-made classes.
document.querySelector("div").classList.add("background");
body { background-color:#e0e0e0; }
div { width:150px; height:150px; border:1px solid black; padding:10px;}

.background {
  /* Just set the background property using url(path). That's it. */
  background:url("http://www.thetherapystore.com.au/wp-content/uploads/2015/06/SSMILE.jpg");
  
  background-size:contain; /* Only used here to scale the image to fit */
}
<div>This content is in the foreground.</div>
0 голосов
/ 09 февраля 2019

орфографическая ошибка в прозрачном с URL-адресом изображения, а не только имя 

var shadow = document.getElementById("shadow");
shadow.style.backgroundColor = "transparent";
shadow.style.opacity = "1";
shadow.style.backgroundImage = "url('image+address')";
div#shadow
{
    opacity: 0;
    position: absolute;
    top: 315px;
    left: 721px;
    width: 48px;
    height: 48px;
}
<html>
    <body>
        <div id="shadow"></div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...