Вставка изображения средствами CSS - HTML и CSS

DemonIa · 01.06.2012, 17:11

Здравствуйте. На своем сайте ( CMS OpenCart ) дорабатываю дизайн.
Суть такая: в файле stylesheet.css была найдена часть кода отвечающая за фон страницы:

body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}

Я дописал еще: background: #FFFFFF url(fiat.jpg);
background-repeat: no-repeat;
background-attachment:fixed;

Так как и хотел - в фоне стоит картинка:

К коду я еще прибавил свойство opacity, поэтому, для лучшей читабельности информации на сайте, я создал фото (полупрозрачный белый фон), которое хочу "наложить" поверх основного фото.
Суть задачи такова: как средствами css вставить вторую (полупрозрачную) картинку в "тело", чтобы ее потом можно было подогнать Мерджином и Педдингом? Спасибо.

kettanaito · 02.06.2012, 13:24

Попробуйте создать отдельный элемент, отвечающий за фон страницы, к которому и будет применено свойство прозрачности (opacity).

Код:

HTML:
...
<div id="background"></div>
...

CSS (схематично):
body {
...
z-index:100;
}

#background {
background:url('../images/bg.png') no-repeat top center; 
position:fixed;
top:0px; left:0px;
opacity:0.5;
z-index:0;
}

Таким образом прозрачность всего "тела" сайта останется не затронутой, а задний фон все также останется полу-прозрачным. Свойство z-index поможет определить порядок отображения элементов на странице. В данном случае свойство имеет большее значение BODY (z-index:100), а меньшее - наш элемент с фоном (z-index:0). Грубо говоря, весь сайт будет отображаться поверх элемента с фоном.
P.S. Однако если свойство z-index имеет именно BODY, то сам элемент с фоном должен размещаться вне элемента тела (т.е. не быть размещенным внутри тэга BODY). Это не целесообразно, по этому я посоветовал бы внести подобную структуру в HTML-документ:

Код:

<body>
<div id="wrapper">
Здесь все содержимое Вашего сайта
</div>
<div id="background"></div>
</div>

При такой структуре свойство z-index стоит задать элементу #wrapper, и так как #background находится за его границами - все будет отображаться верно, а файл стилей будет иметь предположительно такой вид:

Код:

body {...}

#wrapper {
margin:0px auto;
position:relative;
width:960px;
z-index:100;
}

#background {
background:url('../images/bg.png') no-repeat top center; 
position:fixed;
top:0px; left:0px;
opacity:0.5;
z-index:0;
}

(В качестве альтернативного решения можно так же изменить прозрачность самой исходной картинки, выступающей в роли фона, в графическом редакторе).
Надеюсь я смог дать ответ на интересующий Вас вопрос.

01.06.2012, 17:11	#1
DemonIa Новичок Джуниор Регистрация: 01.06.2012 Сообщений: 1	Вставка изображения средствами CSS Здравствуйте. На своем сайте ( CMS OpenCart ) дорабатываю дизайн. Суть такая: в файле stylesheet.css была найдена часть кода отвечающая за фон страницы: body { background-color: #ffffff; color: #000000; font-family: Arial, Helvetica, sans-serif; } Я дописал еще: background: #FFFFFF url(fiat.jpg); background-repeat: no-repeat; background-attachment:fixed; Так как и хотел - в фоне стоит картинка: К коду я еще прибавил свойство opacity, поэтому, для лучшей читабельности информации на сайте, я создал фото (полупрозрачный белый фон), которое хочу "наложить" поверх основного фото. Суть задачи такова: как средствами css вставить вторую (полупрозрачную) картинку в "тело", чтобы ее потом можно было подогнать Мерджином и Педдингом? Спасибо.

02.06.2012, 13:24	#2
kettanaito Веб-дизайнер Форумчанин Регистрация: 11.08.2011 Сообщений: 305	Попробуйте создать отдельный элемент, отвечающий за фон страницы, к которому и будет применено свойство прозрачности (opacity). Код: `HTML: ... <div id="background"></div> ... CSS (схематично): body { ... z-index:100; } #background { background:url('../images/bg.png') no-repeat top center; position:fixed; top:0px; left:0px; opacity:0.5; z-index:0; }` Таким образом прозрачность всего "тела" сайта останется не затронутой, а задний фон все также останется полу-прозрачным. Свойство z-index поможет определить порядок отображения элементов на странице. В данном случае свойство имеет большее значение BODY (z-index:100), а меньшее - наш элемент с фоном (z-index:0). Грубо говоря, весь сайт будет отображаться поверх элемента с фоном. P.S. Однако если свойство z-index имеет именно BODY, то сам элемент с фоном должен размещаться вне элемента тела (т.е. не быть размещенным внутри тэга BODY). Это не целесообразно, по этому я посоветовал бы внести подобную структуру в HTML-документ: Код: `<body> <div id="wrapper"> Здесь все содержимое Вашего сайта </div> <div id="background"></div> </div>` При такой структуре свойство z-index стоит задать элементу #wrapper, и так как #background находится за его границами - все будет отображаться верно, а файл стилей будет иметь предположительно такой вид: Код: `body {...} #wrapper { margin:0px auto; position:relative; width:960px; z-index:100; } #background { background:url('../images/bg.png') no-repeat top center; position:fixed; top:0px; left:0px; opacity:0.5; z-index:0; }` (В качестве альтернативного решения можно так же изменить прозрачность самой исходной картинки, выступающей в роли фона, в графическом редакторе). Надеюсь я смог дать ответ на интересующий Вас вопрос. Последний раз редактировалось kettanaito; 02.06.2012 в 13:32.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Управление псевдоэлементами css средствами javascript	Naive	JavaScript, Ajax	5	01.03.2012 15:27
Оформление e-mail средствами CSS ??	D-Snaker	HTML и CSS	8	05.01.2012 17:57
Эффект ТВ помех средствами CSS	Zmicer	HTML и CSS	1	10.11.2011 22:57
Вставка изображения в word средствами delphi	MeTeOpA	БД в Delphi	2	03.06.2010 22:09
CSS вёрстка, вставка Google map поверх изображения, фона!	sting	HTML и CSS	0	09.02.2010 22:27