Главная » Все про CSS » Работа с картинками (изображениями) в CSS

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

2013-03-01 / Вр:23:32 / просмотров: 174912

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

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274711
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222615
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187976
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569

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

Женя

31.07.2014 в 22:11

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

.site-frame {
width: 994px;
margin: 0 auto;
}
```
Пробовал добавлял по разному но и ваш вариант не подходит если менять стиль CSS.
Помогите!
Степан => автор блога

01.08.2014 в 00:03

Здравствуйте! Женя, Вам точно нужно две фоновые картинки или вам нужно маленькую картинку залить по всему фону?
Чтобы добавить две фоновые картинки пропишите этот код:
```
<style ENGINE="text/css">
HTML { background: url(картинка 1); /* Путь к графическому файлу с первым фоном */ }
BODY { background: url(картинка 2) no-repeat top center; /* Путь к графическому файлу со вторым фоном */ }
</style>
```
Жень, этот код рабочий, я уверен на все 101%
Наталия

12.11.2014 в 17:31

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

12.11.2014 в 21:25

Здравствуйте, Наталия! Вы не правильно указали путь к фону!
```
background: url(../images/fonosn2.jpg);
```
Почитайте статью “с“.
Наталия

13.11.2014 в 10:29

Все получилось, большое спасибо.
Степан => автор блога

13.11.2014 в 21:31

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

24.04.2015 в 10:07

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

26.04.2015 в 01:55

Здравствуйте! Я так понял, логотип находиться в блоке id=”menubar”.
В CSS пишете все стили здесь:
```
#menubar
{
здесь все стили
}
```
Рекомендую вначале прописать границы к блоку, чтобы видеть, где находиться блок
```
#menubar
{
border:1px solid #cc0000;
}
```
Чтобы придать отступы, почитайте об этом здесь
baloo

26.04.2015 в 02:18

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

26.04.2015 в 10:36

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

26.04.2015 в 14:48

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

16.05.2015 в 13:11

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

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

17.05.2015 в 01:32

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

<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='/wp-content/uploads/2015/05/zvuk-pri-navedeniyi-na-ssylku-000-135x180.jpeg' id="img_1" style="position: absolute;">
<img src='/wp-content/uploads/2015/05/UpToLike-WP-000-135x180.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0);
    position: absolute;">
<img src='/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.05.2015 в 02:33

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

17.05.2015 в 21:53

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

10.06.2015 в 10:24

Здравствуйте Степан! Спасибо за Ваш труд. У меня есть вопрос. Хочу установить на сайте картинку с отображением через CSS. На локальном сервере всё работает как надо, но как только я переношу всё на хостинг картинка пропадает. Никак не могу решить эту проблему и не пойму почему так происходит. Вот что прописано в CSS –
```
}.cap {
	background-attachment: fixed;
	background-image: url(./gif/Capp_A.gif);
	background-position: right;
	background-repeat: no-repeat
}
```
это на сайте

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

10.06.2015 в 11:55

Здравствуйте!
Попробуйте вот так:
```
.cap {
	background-attachment: fixed;
	background-image: url(gif/Capp_A.gif);
	background-position: right;
	background-repeat: no-repeat;
}
```
или пропишите полный путь до картинки (http://адрес сайта/gif/Capp_A.gif):
```
.cap {
	background-attachment: fixed;
	background-image: url(http://адрес сайта/gif/Capp_A.gif);
	background-position: right;
	background-repeat: no-repeat;
}
```
Часть кода в комментарии отсутствует. “это на сайте” – после этого, я так понимаю должен был быть еще один код.
Чтобы код дошел, напишите в комментариях вот так: [code]код[/code]
Если ничего не получиться, напишите адрес сайта, я посмотрю что не так.
Hellss

10.06.2015 в 12:14

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

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

10.06.2015 в 12:35

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

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

Hellss

10.06.2015 в 13:04

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

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

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.06.2015 в 13:14

можно и так:
```
.cap {
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}
```
У меня все работает. Могу скрин показать, как сейчас отображается ваш сайт.
Стиль, нужно вставить в файл “style.css”.
У меня вопрос, там у вас не лишняя скобка?
```
}.cap {
```
Если ничего не получиться, могу за чисто символическую оплату все сделать самому.
Hellss

10.06.2015 в 13:42

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

10.06.2015 в 14:00
Hellss

10.06.2015 в 14:15

Разобрался, спасибо, теперь работает, но этот стиль я прописал не в CSS, а на страницу, по другому работать не хочет.
```
td.cap {
  /* background-attachment: fixed; */
  background-image: url(gif/Capp_A.gif);
  background-position: right;
  background-repeat: no-repeat;
}
```
Степан => автор блога

10.06.2015 в 14:59

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

10.06.2015 в 15:02

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

04.03.2016 в 21:49

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

09.03.2016 в 21:30

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

09.03.2016 в 22:21

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

09.03.2016 в 22:26

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

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

09.03.2016 в 22:56

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

09.03.2016 в 23:02

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

29.04.2016 в 15:50

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

02.05.2016 в 20:59

Здравствуйте! Задайте картинке класс, на которых вы хотите указать тень.
Например вот так:
```
<img src ="images/zirka.png" class="ten">
```
а в CSS:
```
.ten {
 /* стили для тени*/
}
```
Анатолий

09.05.2016 в 20:42

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

09.05.2016 в 23:15

Здравствуйте, а у меня получилось:
```
<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;
}
```

Анатолий

12.05.2016 в 21:01

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

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

<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="http://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;
}

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

14.05.2016 в 13:49

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

<html>
 <head>
 <title>Изображение</title>
 <style>
 </style>
 </head>
 <body>
 <p><img src="http://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>

Анатолий

15.08.2016 в 09:56

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

17.08.2016 в 21:50

Странно! У меня все получилось. Добавьте в CSS к примеру вот такой код:
```
.ten {
    box-shadow: 0.1em 0.2em 0.2em #000000, 0.1em 0.2em 0.2em #000000;
}
```

Анатолий

18.08.2016 в 09:50

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

<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.08.2016 в 12:01

Анатолий, ну Вы и тут начудили. Изучайте 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>