Как мне заставить мои изображения отображаться в моем HTML / CSS?

#html #css

#HTML #css

Вопрос:

Приведенные ниже HTML и CSS вместе создают синюю страницу с 5 черными ромбами. Следующий шаг — превратить эти черные ящики в изображения. Проблема в том, что первое изображение не отображается должным образом. Местоположение / URL указаны правильно и существуют в том виде, в каком я поместил его в виде изображения перед div для тестирования.

Я считаю, что проблемы связаны с

 ul.gens li.gen1 .image {
    background: url(staticfiles/images/fire.jpg);
    background-size: cover;
}

Но каждое редактирование или тест, которые я делаю, не показывает результатов появления изображения. Любая помощь приветствуется.

Вот сегмент HTML, чтобы вы могли видеть мои классы:

 <body class="generations">

    <!-- Diamond Shape Grid -->

    <ul class="gens">
        <li class="gen1">
            <div class="image"></div>
        </li>
        <li class="gen2">
            <div class="image"></div>
        </li>
        <li class="gen3">
            <div class="image"></div>
        </li>
        <li class="gen4">
            <div class="image"></div>
        </li>
        <li class="gen5">
            <div class="image"></div>
        </li>
    </ul>

</body>

Вот CSS для этой страницы. Он сочетается с CSS моей другой страницы. Для этой страницы все работает конкретно с их тегами.

 /* Generation styles */

body.generations {
    margin: 0;
    padding: 0;
    background: #2c2c54;
}

ul.gens {
    position: absolute;
    width: 600px;
    height: 150px;
    margin: 0;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

ul.gens li {
    list-style: none;
    position: absolute;
    width: 200px;
    height: 200px;
    background: black;
    transform: rotate(45deg);
    margin: -100px;
    overflow: hidden;
}

ul.gens li.gen1 {
    top: 0;
    left: 0;
}

ul.gens li.gen2 {
    bottom: 0;
    left: 25%;
}

ul.gens li.gen3 {
    top: 0;
    left: 50%;
}

ul.gens li.gen4 {
    bottom: 0;
    left: 75%;
}

ul.gens li.gen5 {
    top: 0;
    left: 100%;
}

ul.gens li .image {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg) scale(1.42);
}

ul.gens li.gen1 .image {
    background: url(staticfiles/images/fire.jpg);
    background-size: cover;
}

Ответ №1:

Похоже, что это работает, когда вы заменяете другой URL на место:https://jsfiddle.net/1j4rwsvc/2 /

Похоже, что ваш URL-адрес неверен! попробуйте url: ('./staticfiles/images/fire.jpg');

1. Я проверил это 100 раз… нужны ли кавычки, поскольку они находятся в каталоге, как в <img src=»pic.png»>?

2. @Genoxidus при любом изменении вы можете добавить скриншот вашей файловой структуры туда, где находится эта html-страница, где находится изображение?

3. Я следую рекомендациям, приведенным здесь, когда дело доходит до » в определении URL: w3schools.com/cssref/pr_background-image.asp

4. imgur.com/q8oyMCY Попытался изменить путь и перепечатал все и т.д.

5. Сначала вам нужно выйти из вашего файла CSS, используя ../ so что-то вроде следующего url: ('../staticfiles/images/fire.jpg');