Работа с картинками (изображениями) в CSS

Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.
Я не буду здесь делать большое вступление, а приступлю сразу к делу.
Итак, в этой статье я расскажу о всех возможных способах работы с изображениями: вставка фонового изображения, выравнивание изображения, прозрачность, тень от картинки и т.д.

Работа с картинками (изображениями) в CSS

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body.  Задайте путь к изображению внутри значения url.

<style> body { background: url(путь к файлу); } </style>

или

<style> body { background-image: url(путь к файлу); } </style>

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

Совет: учтите, фоновое изображение загружается не сразу, поэтому рекомендую добавлять к фоновому изображению цвет фона, так как цвет загружается моментально. Задайте цвет фону близкий к цвету фонового рисунка.

Пример:


<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body {
 background: #000000 url(images/bg.gif); /* Цвет фона и путь к графическому файлу */
 }
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

или

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body
{
background-image: url(images/bg.gif); /* Путь к графическому файлу */
background-color:#000000; /* Цвет фона */
}
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

Повтор фоновой картинки.

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали,  а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y repeat-x | no-repeat;

Значения:

repeat-y – повтор фонового изображения по оси – у (вертикаль);
repeat-x – повтор фонового изображения по оси – х ( горизонталь);
no-repeat; – запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Пример:

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body
{
background-image: url(images/bg.gif); /* Путь к графическому файлу */
background-color:#000000; /* Цвет фона */
background-repeat: repeat-x; /* фон будет повторятся по оси-х (горизонтали) */
}
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

или

<html>
 <head>
 <title>Фон в CSS</title>
 <style>
 body {
 background: #000000 url(images/bg.gif) repeat-x; /* Цвет фона, путь к графическому файлу и повтор фона по оси-х (горизонтали)*/
 }
 </style>
 </head>
 <body>
 <p>Ваш текст</p>
 </body>
</html>

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
Зададим фоновое изображение к элементам — HTML и BODY.

<style ENGINE="text/css">
HTML { background: url(картинка 1); /* Путь к графическому файлу с первым фоном */ }
BODY { background: url(картинка 2) no-repeat top center; /* Путь к графическому файлу со вторым фоном */ }
</style>

Пример:

<html>
<head>
<title>Фон в CSS</title>
<style>
HTML
{
background: url(картинка-1) no-repeat bottom; /* Путь к графическому файлу с первым фоном, запрет на повтор картинки, прижать к низу части экрана */
}
BODY
{
background: url(картинка-2) no-repeat top center; /* Путь к графическому файлу со вторым фоном, запрет на повтор картинки, прижать к верху по центру */
}
</style>
</head>
<body>
<p>Контент сайта</p>
</body>
</html>

Результат:

Как добавить две фоновые картинки на веб-страницу.

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Примеры:

метод 1:

<html>
<head>
<style>
BODY
{
background: url(картинка.gif) no-repeat center; /* Путь к графическому файлу, запрет на повтор картинки и разместить по центру */
}
</style>
</head>
<body>
<p>Контент сайта</p>
</body>
</html>

метод 2:

<html>
<head>
<style>
.imgCenter {text-align:center;}
</style>
</head>
<body>
<p>Текст параграфа.</p>
<div class="imgCenter">
<img src="картинка.gif" border="0" width="300" height="300" alt="" />
</div>
<p>Далее по тексту параграфа.</p>
</body>
</html>

метод 3:

<html>
<head>
<style>
.center {display:block; margin:0 auto;}
</style>
</head>
<body>
<p>Текст параграфа.</p>
<p>Текст параграфа.
<img class="center" src="картинка.gif" border="0" width="300" height="300" alt="" />
Далее по тексту параграфа.</p>
</body>
</html>

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

background-size: 500px 200px;

Можно также указать только одно значение, и это будет считаться шириной. Тогда высота будет как auto и сохранятся пропорции картинки. Посмотрите пример снизу.

можно так:

background-size: 200px;

а можно вот так:

background-size: 200px auto;

Пример:

<html>
<head>
<style>
body
{
 background:url(картинка.jpg);
 background-size:500px 200px;
 background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>текст сайта</p>
</body>
</html>

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки <IMG align=”right” …>, вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none;

 Значение:

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Пример:

<html>
 <head>
 <title>Обтекание</title>
 <style>
 .leftimg {
 float:left; /* Выравнивание по левому краю */
 margin: 5px 5px 5px 0; /* Отступы вокруг картинки */
 }
 .rightimg {
 float: right; /* Выравнивание по правому краю */
 margin: 5px 0 5px 5px; /* Отступы вокруг картинки */
 }
 </style>
 </head>
 <body>
 <h2>Основы CSS</h2>
 <p><img src="images/1.jpg" class="leftimg">
 Приветствую всех читателей и случайных посетителей моего блога.
 Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера - CSS.
 CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в
 себе правила для группы или одиночного элемента. CSS используют для изменения
внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</p>
 <h2>Основы CSS</h2>
 <p><img src="images/2.jpg" class="rightimg">
 Давайте перейдем к основам CSS.CSS файл имеет расширение *.css.
 Часто веб-мастера присваивают CSS файлу имя style (style.css).
 CSS файл тесно связан с HTML. Другими словами, это можно объяснить
 так: CSS без HTML работать не будет.
 Предлагаю для общего понимания рассмотреть пример, как можно объединить
 HTML с CSS файлом.</p>
 </body>
</html>

Здесь я указал отступы текста от картинки

margin: 5px 0 5px 5px;

Результат:

Обтекание (выравнивание) картинки текстом.

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

Тень картинки

1. –  inset –  тень внутри элемента, без inset тень будет наружу;
2. – сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. – сдвиг по вертикали (6px — вниз, -6px — вверх);
4. – размытие тени (0 — четкая тень);
5. – растяжение тени (3px — растяжение, -3px — сжатие);
6. – цвет тени

box-shadow: 0 0 5px; – тень вокруг элемента

тень вокруг элемента

box-shadow: inset 0 0 5px; – тень внутри

тень внутри

Пример:

<html>
 <head>
 <title>Изображение</title>
 <style>
 img {
 box-shadow: -19px 0 22px -19px #000, 19px 0 22px -19px #000;
 }
 </style>
 </head>
 <body>
 <p><img src="картинка.jpg" alt=""></p>
 </body>
</html>

Результат:

Тень картинки

Прозрачность картинки.

Начну сразу с примера.

Пример:

<html>
<head>
</head>
<body>
<p>Обычное изображение:</p>
<img src="картинка.png" width="300" height="200" />
<p>изображение с прозрачностью:</p>
<img src="картинка.png" width="300" height="200"
style="opacity:0.4;filter:alpha(opacity=40)" />
</body>
</html>

Обратите внимание в коде на opacity:0.4. Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

Результат:

Прозрачность картинки

С наилучшими пожеланиями Webmasterok2009

Автор статьи: Степан => автор блога · Опубликовано в 01.03.2013 - Все про CSS

43 комментария | Пост Комментарий

Женя говорит:

Здравствуйте.
Как добавить две фоновые картинки на веб-страницу? ПРИМЕР: [ссылка удалена (лживый сайт)]
Интересует вот этот рисунок: [ссылка удалена] – как его добавить в свои стили CSS??????
У меня в стилях CSS это:

body {
background: url("[ссылка удалена]") fixed;
}

.site-frame {
width: 994px;
margin: 0 auto;
}

Пробовал добавлял по разному но и ваш вариант не подходит если менять стиль CSS.
Помогите!

Опубликовано на 31 июля, 2014

Степан => автор блога говорит:

Здравствуйте! Женя, Вам точно нужно две фоновые картинки или вам нужно маленькую картинку залить по всему фону?
Чтобы добавить две фоновые картинки пропишите этот код:

<style ENGINE="text/css">
HTML { background: url(картинка 1); /* Путь к графическому файлу с первым фоном */ }
BODY { background: url(картинка 2) no-repeat top center; /* Путь к графическому файлу со вторым фоном */ }
</style>

Жень, этот код рабочий, я уверен на все 101% 🙂

Опубликовано на 1 августа, 2014

Наталия говорит:

Добрый вечер Степан.
Уже замучилась, не могу вставить на указанный сайт фоновую картинку. Помогите, подскажите, может ли сайт поймать глюк, никакую картинку с Css не видит. Я не программист все передрано у кого-то или сделано методом тыка. Цвет выставляется и отражается мгновенно, а картинка вообще никак даже спустя день. На другой сайт вставляю – все получается, на этот никак.

Опубликовано на 12 ноября, 2014

Степан => автор блога говорит:

Здравствуйте, Наталия! Вы не правильно указали путь к фону!

background: url(../images/fonosn2.jpg);

Почитайте статью “с“.

Опубликовано на 12 ноября, 2014

Наталия говорит:

Все получилось, большое спасибо.

Опубликовано на 13 ноября, 2014

Степан => автор блога говорит:

Пожалуйста, я рад, что оказался Вам полезным!

Опубликовано на 13 ноября, 2014

baloo говорит:

Добрый день!Перенес в темплейте логотип из хедера в менюбар (самый верх) ,как придать стили картинке,отступы и тд?Сайт на денвере ,так что показать еще не могу.

Опубликовано на 24 апреля, 2015

Степан => автор блога говорит:

Здравствуйте! Я так понял, логотип находиться в блоке id=”menubar”.
В CSS пишете все стили здесь:

#menubar
{
здесь все стили
}

Рекомендую вначале прописать границы к блоку, чтобы видеть, где находиться блок

#menubar
{
border:1px solid #cc0000;
}

Чтобы придать отступы, почитайте об этом здесь

Опубликовано на 26 апреля, 2015

baloo говорит:

Спасибо за ответ!Пришлось создать класс,а для него уже прописать стили.Но почему не работает отступ лево-право-padding.Верх и низ все нормально.Не подскажите,что мб?

Опубликовано на 26 апреля, 2015

Степан => автор блога говорит:

попробуйте:
– укажите ширину блока, а потом укажите лево-padding, если не поможет, тогда просто укажите лево-margin

Опубликовано на 26 апреля, 2015

baloo говорит:

Спасибо! Помогло.Еще один вопрос есть,но без скрина не обойтись.Вы предыдущий видели?

Опубликовано на 26 апреля, 2015

Андрей говорит:

Здравствуйте!
Не могли бы вы подсказать, как можно задать смену картинок на сайте (чтобы картинки менялись через определенный интервал времени)?
Буду очень признателен.
С уважением, Андрей.

Опубликовано на 16 мая, 2015

Степан => автор блога говорит:

Здравствуйте, Андрей!

<html> 
<head>
 <meta charset="utf-8" /> 
<title> - BlogGood.ru</title>
<script ENGINE="text/javascript">
var image_count = 3;
var interval = 3000;
var time_out = 10;
var i = 0;
var timeout;
var opacity = 100;

function change_image() {
 opacity--;
 var j = i + 1;
 var current_image = 'img_' + i;
 if (i == image_count) j = 1;
 var next_image = 'img_' + j;
 document.getElementById(current_image).style.opacity=opacity/100;
 document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
 document.getElementById(next_image).style.opacity=(100-opacity)/100;
 document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
 timeout = setTimeout("change_image()", time_out);
 if (opacity==1) {
  opacity = 100;
  clearTimeout(timeout);
 }
}

setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);
</script>  
 </head>
  <body> 


<img src='https://bloggood.ru/wp-content/uploads/2015/05/zvuk-pri-navedeniyi-na-ssylku-000-135x180.jpeg' id="img_1" style="position: absolute;">
<img src='https://bloggood.ru/wp-content/uploads/2015/05/UpToLike-WP-000-135x180.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0);
    position: absolute;">
<img src='https://bloggood.ru/wp-content/uploads/2015/05/javascript-mobi-site-000-135x180.png' id="img_3" style="opacity: 0; filter: alpha(opacity=0);
    position: absolute;">
 </body>
</html> 

Опубликовано на 17 мая, 2015

Андрей говорит:

Большое спасибо за ответ. Но у меня по ходу возник вопрос. Как все это сделать, чтобы стили были прописаны на странице style.css. Включая картинки, так как хочу поместить над картинками текст.
С уважением, Андрей.

Опубликовано на 17 мая, 2015

Степан => автор блога говорит:

Посмотрите вот это

Опубликовано на 17 мая, 2015

Hellss говорит:

Здравствуйте Степан! Спасибо за Ваш труд. У меня есть вопрос. Хочу установить на сайте картинку с отображением через CSS. На локальном сервере всё работает как надо, но как только я переношу всё на хостинг картинка пропадает. Никак не могу решить эту проблему и не пойму почему так происходит. Вот что прописано в CSS –

}.cap {
	background-attachment: fixed;
	background-image: url(./gif/Capp_A.gif);
	background-position: right;
	background-repeat: no-repeat
}

это на сайте

помогите пжл разобраться, почему картинка не отображается при загрузке страницы на хостинг.

Опубликовано на 10 июня, 2015

Степан => автор блога говорит:

Здравствуйте!
Попробуйте вот так:

.cap {
	background-attachment: fixed;
	background-image: url(gif/Capp_A.gif);
	background-position: right;
	background-repeat: no-repeat;
}

или пропишите полный путь до картинки (https://адрес сайта/gif/Capp_A.gif):

.cap {
	background-attachment: fixed;
	background-image: url(https://адрес сайта/gif/Capp_A.gif);
	background-position: right;
	background-repeat: no-repeat;
}

Часть кода в комментарии отсутствует. “это на сайте” – после этого, я так понимаю должен был быть еще один код.
Чтобы код дошел, напишите в комментариях вот так: [code]код[/code]
Если ничего не получиться, напишите адрес сайта, я посмотрю что не так.

Опубликовано на 10 июня, 2015

Hellss говорит:

Спасибо за ответ, но ничего не получается, когда ввожу урл сайта то картинка не отображается даже на локалке, уже всё перепробовал, никак не могу понять в чём проблема. Вот страница на которой никак не хочет отображаться картинка в шапке. [адрес сайта спрятан] посмотрите пжл почему не работает.

Опубликовано на 10 июня, 2015

Степан => автор блога говорит:

Теперь будет работать:

td.cap {
  /* background-attachment: fixed; */
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}

Опубликовано на 10 июня, 2015

Hellss говорит:

Степан спасибо, но ничего так и не заработало.

подскажите куда это прописать? Я в стили прописываю, но не помогает.

td.cap {
  /* background-attachment: fixed; */
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}

у меня сейчас в стиле прописано так

}.cap {
  background-attachment: fixed;
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}

Опубликовано на 10 июня, 2015

Степан => автор блога говорит:

можно и так:

.cap {
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}

У меня все работает. Могу скрин показать, как сейчас отображается ваш сайт.
Стиль, нужно вставить в файл “style.css”.
У меня вопрос, там у вас не лишняя скобка?

}.cap {

Если ничего не получиться, могу за чисто символическую оплату все сделать самому.

Опубликовано на 10 июня, 2015

Hellss говорит:

не работает на хостинге))) я уже запарился с этим багом)Скиньте пжл как отображается страница!

Опубликовано на 10 июня, 2015

Степан => автор блога говорит:

Опубликовано на 10 июня, 2015

Hellss говорит:

Разобрался, спасибо, теперь работает, но этот стиль я прописал не в CSS, а на страницу, по другому работать не хочет.

td.cap {
  /* background-attachment: fixed; */
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}

Опубликовано на 10 июня, 2015

Степан => автор блога говорит:

CSS стили можно прописывать несколькими способами.

Опубликовано на 10 июня, 2015

Hellss говорит:

Вот у меня только комбинированный работает! Не знаю почему.

Опубликовано на 10 июня, 2015

Евгений говорит:

Красавчик! Прям всё подробно и красиво,сразу видно, что мастер! Но вот у меня вопрос: даже если я запрещаю картинке повторяться, – она всё равно повторяется 2 раза как минимум, но только по вертикали! Может это из-за того, что в контейнер её хочу поместить, не пойму… ❓
Прошу помощи! 😥

Опубликовано на 4 марта, 2016

Степан => автор блога говорит:

Здравствуйте, Евгений. Если можно, напишите в комментариях, как Вы в CSS коде прописали “background-repeat”?
“она всё равно повторяется 2 раза как минимум” – Вы можете дать ссылку на страницу, где есть эта проблемка?

Опубликовано на 9 марта, 2016

Евгений говорит:

Здравствуйте Степан! Всё готово! Сам решил задачку, проблема была с отображением логотипа сайта [ссылка скрыта] , я сначала разместил картинку рядом с названием, но она копировалась несколько раз вертикально, мучился-мучился, и в итоге обратился к фрилансерам, ребята помогли и сказали, что я разместил картинку в нескольких блоках… Сам пока учусь, а теперь разобрался и дальше сам всё подправил! Спасибо Вам за ответ! ➡

Опубликовано на 9 марта, 2016

Евгений говорит:

Теперь другой вопрос не могу решить с тем же сайтом: в Firefox все странички открываются отлично, – ничто никуда не убегает(поля, отступы) 😎 , а сегодня открыл Chrome – а там всё таки есть различия… ❓

Помогите решить эту проблему! Заранее благодарю! ➡

Опубликовано на 9 марта, 2016

Степан => автор блога говорит:

Не знаю как у Вас, но у меня открылся Ваш сайт абсолютно одинаково, как в Chrome так и Firefox

Опубликовано на 9 марта, 2016

Евгений говорит:

О, я тоже сейчас глянул, – исправил оказывается я уже! – забыл в хроме обновить страницу… :)))

Опубликовано на 9 марта, 2016

Анатолий говорит:

Добрый день. При использовании кода “тень картинки”, все получилось, но есть одна проблема, теперь все загруженные картинки появляются с тенью, как это исправить?
сайт на денвере

Опубликовано на 29 апреля, 2016

Степан => автор блога говорит:

Здравствуйте! Задайте картинке класс, на которых вы хотите указать тень.
Например вот так:

<img src ="images/zirka.png" class="ten">

а в CSS:

.ten {
 /* стили для тени*/
}

Опубликовано на 2 мая, 2016

Анатолий говорит:

Здравствуйте,тень не появляется=( Посмотрите пожалуйста код, может что неправильно?

Опубликовано на 9 мая, 2016

Степан => автор блога говорит:

Здравствуйте, а у меня получилось:

<img src ="images/zirka.png" class="ten">

В CSS

.ten {
    box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
}

Опубликовано на 9 мая, 2016

Анатолий говорит:

Добрый вечер.Все таки не получается.

Вот код виджета:

<p><span style="color: #ffffff;">Обратный звонок</span></p>
<a href="#contact_form_pop_2" class="fancybox">

<html>
 <head>
 <title>Изображение</title>
 <style>
 </style>
 </head>
 <body>
 <p><img src="https://www.md.ru/wordpress/wp-content/uploads/2016/04/knopka.jpg" class="ten"></p>
 </body>
</html>

В css:

.ten {
box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
}

Опубликовано на 12 мая, 2016

Степан => автор блога говорит:

Мы так ничего не решим, нужен адрес страницы, чтобы глянуть, так как у меня в HTML редакторе онлайн все работает:

<html>
 <head>
 <title>Изображение</title>
 <style>
 </style>
 </head>
 <body>
 <p><img src="https://www.md.ru/wordpress/wp-content/uploads/2016/04/knopka.jpg" class="ten"></p>
 </body>
</html>

<style>
.ten {
box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
}
</style>

Опубликовано на 14 мая, 2016

Анатолий говорит:

Вот сайт. Класс ten присвоен у первого виджета и ничего не изменилось.Посмотрите пожалуйста.

Опубликовано на 15 августа, 2016

Степан => автор блога говорит:

Странно! У меня все получилось. Добавьте в CSS к примеру вот такой код:

.ten {
    box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
}

Опубликовано на 17 августа, 2016

Анатолий говорит:

Такой и добавлен. Может в самом виджете что не так:

<p><span style="color: #ffffff;">Группа в VK</span></p>

<html>
 <head>
 <title>Изображение</title>
 <style>
 </style>
 </head>
 <body>
<a href="#" target="_blank">
<img src="knopka-1.jpg " class="ten" alt=""  /  ></a>

 </body>
</html>

Опубликовано на 18 августа, 2016

Степан => автор блога говорит:

Анатолий, ну Вы и тут начудили. Изучайте HTML и CSS.
Попробуйте вот так:

<html>
 <head>
 <title>Изображение</title>
 <style>
.ten {
    box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
}
 </style>
 </head>
 <body>
<a href="#" target="_blank">
<img src="knopka-1.jpg " class="ten" alt=""  /  ></a>
 
 </body>
</html>

Опубликовано на 18 августа, 2016

Анатолий говорит:

Большое спасибо-все получилось!!!!

Опубликовано на 18 августа, 2016