Робота з картинками (зображеннями) в CSS
- Фонова картинка.
- Повтор фонової картинки.
- Як додати дві фонові картинки на веб-сторінку.
- Картинка по центру.
- Як в css змінити розмір картинки.
- Обтікання (вирівнювання) картинки текстом.
- Тінь картинки.
- Прозорість картинки.
- Сподобався пост? Допоможи іншим дізнатися про цю статтю, кликни на кнопку соціальних мереж ↓↓↓
Картинки на сайті мають дві функції: по-перше, вони покращують зовнішній вигляд ресурсу, по-друге, допомагають сприймати інформацію краще.
Я не буду тут робити великий вступ, а приступлю відразу до справи.
Отже, в цій статті я розповім про всі можливі способи роботи з зображеннями: вставка фонового зображення, вирівнювання зображення, прозорість, тінь від картинки і т.д.
Фонова картинка.
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 type = "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
Сподобався пост? Допоможи іншим дізнатися про цю статтю, кликни на кнопку соціальних мереж ↓↓↓
Останні новини категорії:
Схожі статті
Популярні статті:
Додати коментар
Мітки: css , основи
Сподобався пост?Отже, як нам викрутитися в цій ситуації?