Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

Css вставить картинку – Работа с картинками (изображениями) в CSS.Фон картинки, картинка по центру

Добавлено автор alexxlab

CSS работа с изображениями

Изображения украшают сайт, повышают конверсию и повышают уровень информативности контента. Поэтому необходимо уметь правильно использовать изображения в web.

Использование тега img

Тег img — стандартный способ добавления изображений на сайт.

Тег снабжен атрибутами:

  • src — путь к изображению
  • alt — текстовое описание изображения, показывается, когда сайт по каким-либо причинам не отображает контент.

Для масштабирования используются стандартные css свойства: width и height.

Пример:


.example_image {
  width: 300px;
  height: 200px;
}

<img src="http://webninja.ru//media/blog/example_image_1.jpg" alt="Изображение в теге img">

Использование фонового изображения

Тег img хорошо подходит для отображения статичного контента, но когда дело доходит для вывода динамики удобнее выводить элементы с помощью фонового изображения. В качестве контейнера можно использовать любой элемент вроде div, span, a. Далее в дело вступают css свойства background и background-size. Background указывает путь к изображению и задает базовые правила его вывода, а background-size описывает способ отображения фона. Выше показанный пример можно отобразить подобным способом (красная рамка для выделения контейнера).

Пример:


.example_image_1 {
  width: 300px;
  height: 200px;
  background: url(http://webninja.ru//media/blog/example_image_1.jpg) center no-repeat;
}

 

Свойство center выравнивает фон по горизонтали и по вертикали, а no-repeat запрещает повторение изображения.

Но зачастую изображение отличается по размеру и пропорциям от контейнера, а его необходимо растянуть по всей его площади. Для этого используют background-size с параметром cover.

Пример:

 

Со свойством background-size: cover:


.example_image_2 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: cover;
}

 

Если необходимо чтобы изображение занимало максимальную площадь контейнера, но при это не обрезалось используется background-size с параметром contain.

Пример:

 

Со свойством background-size: contain:


.example_image_3 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: contain;
}

 

Также с помощью background-size можно задавать конкретный размер изображения.

Пример:


.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat; 
  background-size: 131px 112px; 
}

 

Еще можно добавить фоновый цвет контейнеру.

Пример:


.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat ##1f1f1f; 
  background-size: 131px 112px; 
}

 

webninja.ru

Как вставить картинку и текст в отдельный блок

В этой статье рассмотрим, как в отдельный блок вставить текст и картинки, и разместить их, при помощи CSS

Для примера используем созданную в предыдущих статьях заготовку каркаса с шапкой сайта.

Возьмём html код блока content.


<div></div>

Вставим в него некоторый объём текста.


<div
  <p>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.</p>

  <p>Если вам что-то будет непонятно,
спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и

стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
</div>

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

Если сайт на виртуальном хостинге, то изображения нужно загружать на него, в соответствующую папку images.

Размещать будем три картинки. Одну по центру в начале статьи, другую в первом абзаце слева, и третью во втором абзаце справа. Вот только, с Вашего позволения, я уберу зелёный фон блока, так как не могу найти изображений с таким фоном.

Сначала в html код блока content вставим адреса картинок, и зададим для каждой из них свой class. Делается это для того, чтобы в дальнейшем, через эти классы, применить к изображениям свойства CSS.


<div>
  <img src="images/i10.png">
    <p><img src="images/i11.jpg">Здравствуйте уважаемые будущие веб-мастера!

Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
    <p><img src="images/11.jpg">Если вам что-то будет непонятно, спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
</div>

Получилось вот так.

Теперь, свойствами CSS, распределим изображения по местам.

.center{ /*Звёздочка*/
margin: 0 0 10px 330px; /*Внешние отступы*/
}
.left{ /*Чёртик слева*/
float: left; /*Обтекание справа*/
margin: 10px 10px 10px 10px;
}
.right{ /*Чёртик справа*/
float: right; /*Обтекание слева*/
margin: 10px 10px 10px 10px;
}

Как видите, для изображений находящихся в массе текста, задаётся свойство CSS — float, и оно предписывает тексту обтекать изображение, и обтекать его с заданной стороны. А при помощи свойства margin, задаётся отступ текста от изображения.

Я бы здесь добавил ещё красную строку.


p{
  text-indent: 30px;
}

На следующей странице мы рассмотрим относительное позиционирование, и будет ещё интереснее. И совсем не сложно.


Перемена

Учитель музыки Сашеньке:
— Предупреждаю, если ты не будешь вести себя как следует, я скажу твоими родителям, что у тебя есть талант.

Как сделать шапку сайта < < < В раздел > > > Абсолютное позиционирование (position:absolute)
 

Рекомендую: Готовые HTML шаблоны на русском

starper55plys.ru

Как добавить рамку к изображению?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Установить вокруг изображения рамку заданного цвета и толщины.

Решение

Для добавления рамки вокруг картинки применяется стилевое свойство border, которое следует добавить к селектору IMG. В качестве значения одновременно указывается толщина границы, её стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать img {border: 2px solid #ff0000;}. В примере 1 приведен полный код для добавления рамки к изображениям на странице.

Пример 1. Добавление рамки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Винни-Пух</title>
  <style>
   img {
    border: 3px solid #00a8e1;
   }
  </style>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="Винни-Пух"></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Изображение с рамкой

В данном случае рамка будет добавляться ко всем изображениям на странице. Чтобы установить рамку только для выбранных рисунков, можно воспользоваться стилевым классом, указывая его для определенных тегов <img> (пример 2).

Пример 2. Добавление рамки к избранным рисункам

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Винни-Пух</title>
  <style>
   .frame {
    border: 3px solid #00a8e1;
   }
  </style>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="Винни-Пух"></p>
  <p><img src="images/figure.jpg" alt="Винни-Пух" 
  ></p>
 </body>
</html>

В данном примере введён стилевой класс frame, который добавляется к выбранным рисункам с помощью атрибута class.

htmlbook.ru

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *