Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/593: Рейтинг темы: голосов - 593, средняя оценка - 4.63
0 / 0 / 0
Регистрация: 04.02.2013
Сообщений: 7
1

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

04.02.2013, 01:10. Показов 113403. Ответов 6
Метки нет (Все метки)

Ребят, подскажите, пожалуйста, как вставить картинку при помощи 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>

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

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.02.2013, 01:10
Ответы с готовыми решениями:

HTML - Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на...

Как в html вставить 2-картинку на 1-картинку???
Если 1-картинка не должна быть фоновая. пожалуйста поподробней.

Как вставить картинку выше текста в CSS
Здравствуйте, подскажите, пожалуйста, как вставить картинку в CSS выше текста &lt;h3&gt;Веб-сайты&lt;/h3&gt;...

Как вставить локальную картинку в локальный HTML файл (webview)
как вставить локальную картинку в локальный HTML файл при использовании webview в андроид студио?

6
546 / 198 / 23
Регистрация: 26.10.2012
Сообщений: 274
04.02.2013, 02:39 2
А зачем вам через css? Подробности плиз...

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

HTML5
1
<img src="https://www.cyberforum.ru/image/01.jpg" alt="я красивая картинка" width="395" height="600" />
0
3738 / 2689 / 616
Регистрация: 08.06.2007
Сообщений: 9,266
Записей в блоге: 4
04.02.2013, 02:47 3
Цитата Сообщение от Jo_Sky Посмотреть сообщение
Картинка нигде не отображается.
в span у вас ничего не содержится. span схлопнется до нулевой длины. Занесите туда несколько принудительных пробелов, тогда увидите хотя бы верхний кусочек фона.
HTML5
1
<span class="gray">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
а еще лучше использовать div с указанием нужной ширины и высоты.
0
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
3738 / 2689 / 616
Регистрация: 08.06.2007
Сообщений: 9,266
Записей в блоге: 4
04.02.2013, 03:17 5
Цитата Сообщение от Jo_Sky Посмотреть сообщение
Мне необходимо, чтобы фон отображался целиком.
Так прикажите, и компьютер сделает то, что вам необходимо. В то, что span не показывает фона, не верю. Приведите полный текст, как вы пробовали.
Цитата Сообщение от Jo_Sky Посмотреть сообщение
Может span здесь не прокатывает?
span прокатывает. Через css вы можете задать, чтоб он вел себя подобно div
CSS
1
2
3
4
5
6
.gray {
    background-image: url(300x200_03.jpg);
    width: 300px;
    height: 200px;
    display: block;
}
Правда, зачем, если можно использовать div.
0
Эксперт JSЭксперт HTML/CSS
2430 / 1108 / 310
Регистрация: 23.06.2011
Сообщений: 3,487
04.02.2013, 08:07 6
Цитата Сообщение от Jo_Sky Посмотреть сообщение
Так как в html файле будет много повторяющихся блоков идущих вниз друг за другом.
тут то как раз див и удобней будет

Цитата Сообщение от Jo_Sky Посмотреть сообщение
Мне необходимо, чтобы фон отображался целиком.
В диве пробелы не нужны, но размеры обязательны, иначе див схлопнется в ноль.

все работает
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>
1
3738 / 2689 / 616
Регистрация: 08.06.2007
Сообщений: 9,266
Записей в блоге: 4
04.02.2013, 13:47 7
Цитата Сообщение от newJS Посмотреть сообщение
все работает
В том-то и дело, что у всех работает, а у Jo_Sky не работает. Возможно, у него битая картинка или ошибка в URL, да мало ли чего. Полную информацию для ситуации, в которой не работает, он не приводит.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.02.2013, 13:47

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Подскажите пожалуйста, как в QBasic вставить картинку с html адреса?
Добрый вечер! Подскажите пожалуйста, как в QBasic вставить картинку с html адреса? В код вписать...

Html и css. Можно ли подогнать картинку в html под рамку
Добрый день. У меня такой вопрос. Создал рамку в фотошопе. Можно ли подогнать картинку в html под...

Как адаптировать картинку с помощью бутстраповской сетки или средствами HTML/CSS
Не знаю как адаптировать картинку в шапке сайта. Уже брал проект,где вообще медиазапросы...

Как CSS/HTML шаблон вставить в asp.net mvc?
Как CSS/HTML шаблон вставить в asp.net mvc?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.