ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Styling Images


Узнайте, как стиль изображений с помощью CSS.


Округленные изображения

Используйте свойство border-radius для создания округленных изображений:


Paris

Пример

Округленное изображение:

img {
    border-radius: 8px;
}
Paris

Пример

Обкружили изображение:

img {
    border-radius: 50%;
}

Миниатюр

Используйте свойство border для создания миниатюр изображений.

Миниатюру:

Paris

Пример

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

<img src="paris.jpg" alt="Paris">

Эскиз изображения как ссылка:

Пример

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>


Адаптивные образы

Адаптивные изображения будут автоматически корректироваться в соответствии с размером экрана.

Измените размер окна обозревателя, чтобы увидеть эффект:

Norway

Если требуется, чтобы изображение было масштабировано, но никогда не масштабируется до размера, превышающего его исходный размер, добавьте следующее:

Пример

img {
    max-width: 100%;
    height: auto;
}

Совет: Подробнее о адаптивном веб-дизайне читайте в нашем руководстве по CSS RWD.


Центрировать изображение

Чтобы центрировать изображение, установите левое и правое поле в auto и внесите его в block элемент:

Paris

Пример

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Polaroid изображения/карты

Norway

Язык троллей в Хардангер, Норвегия

Norway

Северное сияние в Норвегии

Пример

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

Прозрачное изображение

Свойство opacity может принимать значение от 0,0-1,0. Чем меньше значение, тем прозрачнее:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

Примечание: IE8 и более раньше польза filter:alpha(opacity=x). X может принимать значение от 0-100. Более низкое значение делает элемент более прозрачным.

Пример

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

Текст изображения

Как разместить текст в изображении:

Пример

Norway
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it Yourself:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »

Фильтры изображений

Свойство CSS filter добавляет визуальные эффекты (например, размытие и насыщенность) к элементу.

Примечание: Свойство Filter не поддерживается в обозревателе Internet Explorer, EDGE 12 или Safari 5,1 и более ранних версиях.

Пример

Изменить цвет всех изображений на черный и белый (100% серый):

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Совет: Перейдите к нашей ссылке на CSS-фильтр , чтобы узнать больше о фильтрах CSS.


Наложение изображения при наведении

Создание эффекта наложения при наведении:

Пример

Исчезать в тексте:

Avatar
Hello World

Пример

Исчезать в коробке:

Avatar
John

Пример

Слайд в (вверху):

Avatar
Hello World

Пример

Слайд в (снизу):

Avatar
Hello World

Пример

Слайд в (слева):

Avatar
Hello World

Пример

Слайд в (справа):

Avatar
Hello World

Отражение изображения

Наведите курсор мыши на изображение:

Paris

Пример

img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

Адаптивная Галерея изображений

CSS можно использовать для создания галерей изображений. В этом примере используются мультимедийные запросы для повторного упорядочивания изображений на различных размерах экрана. Измените размер окна обозревателя, чтобы увидеть эффект:

Trolltunga Norway
Добавить описание изображения здесь
Forest
Добавить описание изображения здесь
Northern Lights
Добавить описание изображения здесь
Mountains
Добавить описание изображения здесь

Пример

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

Совет: Подробнее о адаптивном веб-дизайне читайте в нашем руководстве по CSS RWD.


Модальное изображение (расширенный)

Это пример, демонстрирующий, как CSS и JavaScript могут работать вместе.

Сначала используйте CSS для создания модального окна (диалоговое окно) и скройте его по умолчанию.

Затем используйте JavaScript, чтобы показать модальное окно и отобразить изображение внутри модального, когда пользователь щелкает по изображению:

Northern Lights, Norway

Пример

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}