Как вставить картинку при помомщи css и html

@Jo_Sky · Регистрация: 04.02.2013

Студворк — интернет-сервис помощи студентам

Ребят, подскажите, пожалуйста, как вставить картинку при помощи css, а потом её вынести при помощи html?

Вот моя последовательность действий:

1. Создаю и подключаю css файл

HTML5

1	<link href="style.css" rel="stylesheet" type="text/css" />

2. Создаю в css файле:

CSS

1
2
3

.gray{
background-image:url(image/gray-n.png);
}

3.Подключаю в html файле:

HTML5

1	<span class="gray"></span>

Картинка нигде не отображается.

@PhotoShopRND · 04.02.2013, 02:39

А зачем вам через css? Подробности плиз...

Если просто html, то как то так.

HTML5

1	<img src="https://www.cyberforum.ru/image/01.jpg" alt="я красивая картинка" width="395" height="600" />

@palva · 04.02.2013, 02:47

Сообщение от Jo_Sky

Картинка нигде не отображается.

в span у вас ничего не содержится. span схлопнется до нулевой длины. Занесите туда несколько принудительных пробелов, тогда увидите хотя бы верхний кусочек фона.

HTML5

1	<span class="gray">        </span>

а еще лучше использовать div с указанием нужной ширины и высоты.

@Jo_Sky · 04.02.2013, 02:52 **[ТС]**

Css необходим для отображения картинок с уже нужным отступом. Так как в html файле будет много повторяющихся блоков идущих вниз друг за другом.
Для того, чтобы не указывать (<img style="position: absolute; left: 100px; - например) в ручную количество пикселей, хочется сразу вбить всё в css, а потом тупо копировать готовый блок.

Добавлено через 1 минуту

Сообщение от palva

в span у вас ничего не содержится. span схлопнется до нулевой длины. Занесите туда несколько принудительных пробелов, тогда увидите хотя бы верхний кусочек фона.

Мне необходимо, чтобы фон отображался целиком. Я пробовал так делать. Может span здесь не прокатывает?

@palva · 04.02.2013, 03:17

Сообщение от Jo_Sky

Мне необходимо, чтобы фон отображался целиком.

Так прикажите, и компьютер сделает то, что вам необходимо. В то, что span не показывает фона, не верю. Приведите полный текст, как вы пробовали.

Сообщение от Jo_Sky

Может span здесь не прокатывает?

span прокатывает. Через css вы можете задать, чтоб он вел себя подобно div

CSS

.gray {
    background-image: url(300x200_03.jpg);
    width: 300px;
    height: 200px;
    display: block;
}

Правда, зачем, если можно использовать div.

@newJS · 04.02.2013, 08:07

Сообщение от Jo_Sky

Так как в html файле будет много повторяющихся блоков идущих вниз друг за другом.

тут то как раз див и удобней будет

Сообщение от Jo_Sky

Мне необходимо, чтобы фон отображался целиком.

В диве пробелы не нужны, но размеры обязательны, иначе див схлопнется в ноль.

все работает

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>w122</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<style type="text/css">
.fon {width:48px; height:48px; background:url(pics/ie48.gif);}
</style>
</head>
 
<body>
 
<div class="fon"></div>
<div class="fon"></div>
<div class="fon"></div>
 
</body>
</html>

@palva · 04.02.2013, 13:47

Сообщение от newJS

все работает

В том-то и дело, что у всех работает, а у Jo_Sky не работает. Возможно, у него битая картинка или ошибка в URL, да мало ли чего. Полную информацию для ситуации, в которой не работает, он не приводит.

@Jo_Sky 0 / 0 / 0 Регистрация: 04.02.2013 Сообщений: 7
	04.02.2013, 02:52 [ТС]	4
	Css необходим для отображения картинок с уже нужным отступом. Так как в html файле будет много повторяющихся блоков идущих вниз друг за другом. Для того, чтобы не указывать (<img style="position: absolute; left: 100px; - например) в ручную количество пикселей, хочется сразу вбить всё в css, а потом тупо копировать готовый блок. Добавлено через 1 минуту Сообщение от palva в span у вас ничего не содержится. span схлопнется до нулевой длины. Занесите туда несколько принудительных пробелов, тогда увидите хотя бы верхний кусочек фона. Мне необходимо, чтобы фон отображался целиком. Я пробовал так делать. Может span здесь не прокатывает? 0

@palva 3959 / 2870 / 668 Регистрация: 08.06.2007 Сообщений: 9,685 Записей в блоге: 4
	04.02.2013, 13:47	7
	Сообщение от newJS все работает В том-то и дело, что у всех работает, а у Jo_Sky не работает. Возможно, у него битая картинка или ошибка в URL, да мало ли чего. Полную информацию для ситуации, в которой не работает, он не приводит. 0

Опции темы