CSS background-attachment свойство

Последнее обновление 8 мая 2019 12:40:13 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Свойство фонового вложения

Свойство фонового вложения CSS указывает, является ли набор изображений, использующий свойство background-image, фиксированным по отношению к содержащему блоку или он должен прокручиваться.

Синтаксис:

 фон-вложение: прокрутка | фиксированный | унаследовать

Ценности

scroll : указывает, что фоновое изображение будет прокручиваться вместе с содержащим блоком.

fixed : указывает, что фоновое изображение будет зафиксировано относительно содержащего блока и не будет прокручиваться.

наследовать : если установлено, связанный элемент принимает вычисленное значение свойства background-attachment его родительского элемента.

Начальные значения

прокрутки.

Относится к

Свойство background-attachment можно применять ко всем элементам HTML.

наследование

Если значение не указано, свойство background-repeat не получает вычисленное значение его родительского элемента.

Процентное соотношение

Недоступен.

Средства массовой информации

визуальный.

Расчетное значение

Как указано.

Совместимость браузера

браузер	Версия
Internet Explorer	4.0 и выше
Firefox (Геккон)	1.0 и выше
опера	3.5 и выше
Safari (WebKit)	1.0 и выше

Пример свойства background-attachment когда value = "scroll"

Код CSS:

body {background-image: url('w3r.gif'); background-repeat: no-repeat; background-position: 10% 10%; background-attachment: scroll}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of background-attachment property when value="scroll"</title>
<link rel='stylesheet' href=example-background-attachment-scroll.css' type='text/css' /> 
</head>
<body>
<p align="center"><b>w3resource.com</b></p>
<p align="center"><b>A complete tutorial on web based development</b></p>
<p align="center"><b>html</b></p>
<p align="center"><b>xhtml</b></p>
<p align="center"><b>css</b></p>
<p align="center"><b>xml</b></p>
<p align="center"><b>svg</b></p>
<p align="center"><b>smil</b></p>
<p align="center"><b>wml</b></p>
<p align="center"><b>javascript</b></p>
<p align="center"><b>ajax</b></p>
<p align="center"><b>sql</b></p>
<p align="center"><b>php</b></p>
<p align="center"><b>mysql</b></p>
<p align="center"><b>apache</b></p>
<p>Dear friends,</p>
<p>These lessons are developed by a group of developers coding for years. While developing applications using HTML, CSS, JAVASCRIPT, AJAX, PHP, MySql and Apache, we found so many  problems, which comes only when you develop and implement a project for real. And these problems are unsolved untill you face to solve it. </p>
<p>We  have discussed HTML, XHTML, CSS, JAVA SCRIPT, AJAX, PHP, MySQL and Apache extensively in these lessons.And included and solved as well, all the problems which we faced during our development process.</p>
<p>All the codes used in these tutorials, are tested extensively with their respective environments and does not leave any possibilities to have a bug.</p>
<p>Still if you find any, write us to fix that.
<p>Thanks & regards</p>
<p><b>Open source is a development method for software that harnesses the power of distributed peer review and transparency of process. The promise of open source is better quality, higher reliability, more flexibility, lower cost, and an end to predatory vendor lock-in.</b></p>
<p><b>The Open Source Initiative (OSI) is a non-profit corporation formed to educate about and advocate for the benefits of open source and to build bridges among different constituencies in the open-source community.</b></p>
<p><b>One of our most important activities is as a standards body, maintaining the Open Source Definition for the good of the community. The Open Source Initiative Approved License trademark and program creates a nexus of trust around which developers, users, corporations and governments can organize open-source cooperation.</b></p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-attachment, когда value = "scroll".

Пример свойства background-attachment, когда value = "fixed"

Код CSS:

body {background-image: url('w3r.gif'); background-repeat: no-repeat; background-position: 10% 10%; background-attachment: fixed}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of background-attachment property when value="fixed"</title>
<link rel='stylesheet' href=example-background-attachment-fixed.css' type='text/css' /> 
</head>
<body>
<p align="center"><b>w3resource.com</b></p>
<p align="center"><b>A complete tutorial on web based development</b></p>
<p align="center"><b>html</b></p>
<p align="center"><b>xhtml</b></p>
<p align="center"><b>css</b></p>
<p align="center"><b>xml</b></p>
<p align="center"><b>svg</b></p>
<p align="center"><b>smil</b></p>
<p align="center"><b>wml</b></p>
<p align="center"><b>javascript</b></p>
<p align="center"><b>ajax</b></p>
<p align="center"><b>sql</b></p>
<p align="center"><b>php</b></p>
<p align="center"><b>mysql</b></p>
<p align="center"><b>apache</b></p>
<p>Dear friends,</p>
<p>These lessons are developed by a group of developers coding for years. While developing applications using HTML, CSS, JAVASCRIPT, AJAX, PHP, MySql and Apache, we found so many  problems, which comes only when you develop and implement a project for real. And these problems are unsolved untill you face to solve it. </p>
<p>We  have discussed HTML, XHTML, CSS, JAVA SCRIPT, AJAX, PHP, MySQL and Apache extensively in these lessons.And included and solved as well, all the problems which we faced during our development process.</p>
<p>All the codes used in these tutorials, are tested extensively with their respective environments and does not leave any possibilities to have a bug.</p>
<p>Still if you find any, write us to fix that.
<p>Thanks & regards</p>
<p><b>Open source is a development method for software that harnesses the power of distributed peer review and transparency of process. The promise of open source is better quality, higher reliability, more flexibility, lower cost, and an end to predatory vendor lock-in.</b></p>
<p><b>The Open Source Initiative (OSI) is a non-profit corporation formed to educate about and advocate for the benefits of open source and to build bridges among different constituencies in the open-source community.</b></p>
<p><b>One of our most important activities is as a standards body, maintaining the Open Source Definition for the good of the community. The Open Source Initiative Approved License trademark and program creates a nexus of trust around which developers, users, corporations and governments can organize open-source cooperation.</b></p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-attachment, когда value = "fixed".

Смотрите также

Предыдущая: CSS background-position свойство
Далее: CSS background свойство