Думаю, что Вы уже знакомы с тем, как вставить рисунок на рабочий лист Excel. Если Вы просто вставите рисунок на лист, то он перекроет часть ячеек, и они станут недоступными. Это происходит потому, что рисунок помещается на специальный слой, который находится над рабочей областью листа. В этом уроке Вы узнаете, как вставить фоновый рисунок на печатный лист Excel. Сделать это можно вручную, с помощью Колонтитулов. Итак, вот как это делается.

1. Откройте Excel и зайдите на вкладку Insert (Вставка) на Ленте.
2. В разделе Text (Текст) нажмите Header & Footer (Колонтитулы).

В зависимости от размера окна Excel и разрешения монитора, группа команд Text (Текст) может быть свернута в выпадающее меню. В таком случае, сначала нажмите кнопку Text (Текст) на Ленте, а затем в выпадающем меню выберите пункт Header & Footer (Колонтитулы).

2. 
3. В правой части Ленты появится вкладка Header & Footer Tools (Работа с колонтитулами). Чтобы вставить фоновый рисунок, нажмите Picture (Рисунок) в группе команд Header & Footer Elements (Элементы колонтитулов).
4. Откроется диалоговое окно Insert Pictures (Вставка картинок). Выберите расположение Вашего рисунка. В нашем случае картинка была расположена на жёстком диске компьютера, поэтому мы нажали Browse (Обзор) рядом с вариантом From a file (Из файла).
5. Выберите нужный файл и нажмите Insert (Вставить).
6. Пока Вы находитесь в режиме редактирования, вместо рисунка выводится надпись &. С помощью клавиш Space и Enter можно поместить надпись в нужное место страницы. Таким образом, Вы можете расположить рисунок, например, по центру.
7. Если Вы кликните по любой ячейке за пределами колонтитула, то увидите, что выбранная картинка осталась на заднем плане. Содержимое ячеек будет отображаться поверх картинки, вставленной в колонтитул, но, если эта картинка полноцветная, да ещё и тёмная – видно его будет довольно плохо.
8. Яркость картинки можно приглушить. Для этого снова зайдите на вкладку Header & Footer Tools (Работа с колонтитулами). Выберите команду Format Picture (Формат рисунка) в разделе Header & Footer Elements (Элементы колонтитулов).
9. В открывшемся диалоговом окне Format Picture (Формат рисунка) зайдите на вкладку Picture (Рисунок) и в выпадающем списке поля Color (Цвет) выберите Washout (Подложка). Затем нажмите ОК.
10. Картинка на заднем плане листа станет менее яркой.
11. Точно так же в качестве фона Вы можете вставить какой-либо текст. Для этого введите текст в поле колонтитула, используя клавиши Space и Enter, поместите его в нужное место на странице и измените цвет на светло-серый.
12. Чтобы удалить фоновый рисунок, просто откройте колонтитул, выделите вставленный текст или картинку и удалите их. Затем кликните на любую ячейку за пределами колонтитула, чтобы эти изменения сохранились.

Урок подготовлен для Вас командой сайта office-guru.ru
Источник: /> Перевел: Антон Андронов

Правила перепечаткиЕще больше уроков по Microsoft Excel

Оцените качество статьи. Нам важно ваше мнение:

В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.

На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.

Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position. Данный элемент дает большие преимущества и полную свободу движения в указанной области, эта область обозначается свойством position: relative;. А иначе позиционирование будет происходить по отношению к браузеру.

Рассмотрим на первом примере.

HTML

   Пирамиды Египта  

CSS

 .imgblock {     position: relative;     display: inline-block; }  .imgblock img {     height: 160px;     width: 250px; } .imgblock span {     /*background: rgba(0,0,0,0.7); (полупрозрачность)*/     background: #222;     color: #fff;     border-radius: 2px;     position: absolute;     right: 0;     bottom: 10px;     font-size: 18px;     padding: 3px 5px; } 

Результат.

Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.

Далее, форматируем div в линейно–блочный элемент display: inline-block;

И последнее на что стоит обратить внимание — это position: absolute;, задан элементу .

Остальные стили идут как оформление текста.

Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.

HTML

   Семь чудес света 
 Висячие сады Семирамиды  

CSS

 .imgblock2 {      position: relative;     display: inline-block; }  .imgblock2 img {     height: 160px;     width: 250px; }  .imgblock2 h2 {     left: 0;     position: absolute;     top: 10px;     width: 100%;     left: 5px; } .imgblock2 h2 span {     background: #222;     border-radius: 2px;     color: #fff;     font: 16px arial;     line-height: 29px;     padding: 3px 5px; } 

Результат.

Ну вот незадача, мы использовали тег
 — перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получается не очень красиво.

Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел &nbsp, что позволит нарастить промежуток.

Пример.

HTML

   Семь чудес света &nbsp
&nbsp Висячие сады Семирамиды  

CSS

 .imgblock2 {      position: relative;     display: inline-block;     margin: 100px; }  .imgblock2 img {     height: 160px;     width: 250px; }  .imgblock2 h2 {     left: 0;     position: absolute;     top: 10px;     width: 100%;     left: 5px; } .imgblock2 h2 span {     background: none repeat scroll 0 0 #222;     border-radius: 2px;     color: #fff;     font: 16px arial;     line-height: 29px;     padding: 3px 5px; } 

Результат.

Во втором способе применим тег … он как только жирность поменьше, но мы ее совсем уберем.

Пример.

HTML

    Семь чудес света Висячие сады Семирамиды   

CSS

 .imgblock3 {     position: relative;    display: inline-block; } .imgblock3 img {     height: 200px;     width: 300px; } .imgblock3  span {     left: 10px;     position: absolute;     top: 10px;     width: 100%; } .imgblock3 span b {     background: #222;     color: #fff;     font: 16px/34px arial;     padding: 6px 10px;     white-space: nowrap;     border-radius: 3px; } 

Результат.

В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.