#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. Является
staticfiles
подпапкой папки, в которой находится ваш CSS?
Ответ №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');