| Kosten | Пятница, 23 Февраля 2018, 20:59 | Сообщение 1 |
| В этой статье мы рассмотрим, что вы можете сделать с новым свойством opacity в CSS3. Мы будем использовать его в трех формах, как прозрачное изображение, эффект зависания и как текст на прозрачном и многоуровневом фоне. Важно рассмотреть, как будут использоваться картинки. Если изображение предназначено для фона, и нет необходимости, чтобы изображение было действительно беззвучным, вы могли бы использовать более низкую настройку сжатия.
Другой вариант, это использовать текстурные изображения для фона, что может немного уменьшить размер файла. В этом случае, в зависимости от качества, которое вы хотите, вы можете использовать JPEG или GIF. Файлы GIF, как правило, значительно меньше, и в результате они быстрее загружаются. Здесь вы также можете использовать другую форму PNG, PNG-8, которая даст вам 256 цветов.
Общей методикой в веб дизайне является использование большого фонового изображения, наложенного полупрозрачным цветом и текстом. Часто используемый для заставки и заголовков, цветное наложение выставляет лучший фон, что можно расположить для текста, будучи гораздо более визуально интересным, чем сплошной цвет фона.
Хотя размер изображений сейчас не так много, как это было много лет назад, когда dial-up был более распространенным, но по-прежнему хорошей практикой является сохранение размеров файлов по мере возможности, поскольку это уменьшит время загрузки страниц. Если ваши страницы слишком долго загружаются, то вы рискуете потерять аудиторию.
Когда мы выбираем свойство Background opacity для CSS для HTML элемента, в общем случае, это не только изменит непрозрачность изображения в фоновом режиме, но также отражает изменения непрозрачности в его дочерних элементах.
Вы также можете ссылаться на следующий синтаксис непрозрачности, который лучше всего подходит для ваших требований:
Синтаксис непрозрачности фона:
Код opacity: 1.0 /* The default opacity where image looks complete solid. */
opacity: 0.6 /* The image will look less solid, more opaque*/
opacity: 0.1 /* The image will become nearly transparent and text gets visible more clearly */
opacity: inherit /* The default opacity of actual image/*
filter: alpha(opacity=100); /* For IE8 and below */
zoom: 1; /* Triggers "has Layout" in IE 7 and below */
Посмотрите демо-версию или загрузите код из приведенной ниже ссылки.
HTML
Код <!DOCTYPE html> <html> <head> <title>Background CSS ZORNET.RU </title> <!-- Include CSS file here --> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="zornet_ru_lavrun"> <div id="resadun"> </div> <div id="nukidsam"> <p id="container"> Здесь найдете интересные решения в создание сайтов uCoz, что поможет по разработке дизайн и продвижение проектов. </p> </div> </div> </body> </html>
CSS
Код #zornet_ru_lavrun{
position:relative;
}
div#resadun{
background-image: url('http://zornet.ru/Aben/ABGDA/zornet_ru/zNxH5ksxQamf6pDXiCkV9g.png');
opacity:0.9;
width:310px;
height:230px;
}
div#nukidsam {
width: 310px;
height: 230px;
position: absolute;
top: 0;
left: 0;
margin: 0 0 0px 5px;
color: #fff9f9;
text-shadow: 0 1px 0 #2f2d2d;
}
Демонстрация:
Метод div
Наиболее распространенной реализацией этих оверлеев является введение дополнительного div, растянутого для покрытия элемента фоновым изображением. Новое div не имеет контента, но ему дается значение a background-colorи устанавливается ниже opacity, что позволяет частично отображать фоновое изображение.
HTML
Код <div class="zornetrudsa"> <h1>ZorNet: Создание сайта на uCoz</h1> </div> <article> <p>Здесь будет описание под картинкой или статьей, где пременено прозрачность.</p> <p>Второе описание, что можно сделать несколько.</p> </article>
CSS
Код .zornetrudsa {
position: relative;
background: #386cc7;
overflow: hidden;
}
.zornetrudsa:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('http://zornet.ru/Aben/ABGDA/zornet_ru/JZy_HWUZRZafhvc08CXptA.png');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.zornetrudsa h1 {
padding: 47px;
text-align: center;
z-index: 3;
position: relative;
color: #fbf1f1;
}
article {
background: #f9f5f5;
padding: 17px;
}
Этот подход не идеален по нескольким причинам, так как он вводит излишнюю сложность, требующую как изменений HTML и CSS, так и нарушая принцип хранения контента, отделенного от презентации.
Демонстрация:
Методы наложения CSS
Здесь все можно решить, а это когда необходимо держать гостей или пользователя на сайте или странице и моделировать его процесс. И здесь один из способов сохранить пользователя на одной странице, это попытаться включить некоторые из переживаний в контексте текущей страницы, отобразив или всплывающее диалоговое окно в легком слое поверх текущей страницы.
И наконец вы также должны помнить, что с помощью этой техники вы добавляете пустую div к своей разметке, что конечно не является смысловым.
HTML
Код <div class="rvuniksam_zornet"></div> <div class="sakirunom">Интернет ресурс ZORNET.RU</div> <div class="migtersa_kiletun"> <h1>ZorNet: Создание сайта на uCoz</h1> Описание на заднем фоне. Здесь описание! </div>
CSS
Код body {
position: relative;
padding: 27px;
font-family: 'Open Sans', sans-serif;
background: #0c7480;
color: #fdf5f5;
}
/* overlay styles, all needed */
.rvuniksam_zornet {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(66, 63, 63, 0.67);
z-index: 10;
}
/* just some content with arbitrary styles for explanation purposes */
.sakirunom {
width: 295px;
height: 187px;
line-height: 200px;
position: fixed;
top: 49%;
left: 49%;
margin-top: -100px;
margin-left: -150px;
background-color: #1995da;
border-radius: 5px;
text-align: center;
z-index: 11;
}
.migtersa_kiletun {
margin: 30px;
}
h1 {
font-family: 'Federo', sans-serif;
}
Преимущество использования этой технологии заключается в том, что она поддерживается во всех основных браузерах, а также более старых, вплоть до IE8.
Демонстрация:
Вывод:
Здесь прозрачность изображение привязали к функций, так как просто поставить opacity: 0.6; можно на любую картинку, но лучше, чтоб она могла функционировать с присутствием описание.
Как правило, когда прозрачность добавляется в любой div, она автоматически добавляет непрозрачность ко всем связанным элементам в одном div. Этот учебник специально добавляет непрозрачность только к фону, а не к любому другому соответствующему элементу в том же div. Просто следуйте примеру и демонстрации, чтобы добавить непрозрачность к вашему фоновому элементу.
| | Страна: (RU) |
| |
