В предыдущей статье мы использовали изображение с градиентом вверх и вниз в качестве фона заголовка и применили к нему эффект закругленных углов. Правда ли, что такую рамку с закругленными углами можно использовать только для относительно монотонных фотографий? Можем ли мы также сделать некоторые изображения с насыщенными цветами прозрачными и закругленными?
Ответ — да, давайте посмотрим на его окончательное кунг-фу.
Давайте сначала посмотрим на окончательные рендеры :
Видите ли, это округлое изображение, созданное с помощью чистого CSS. Чтобы увидеть эффект прозрачности, я специально применил фоновое изображение. Вы можете скачать эту модель на свой компьютер и изменить размер окна по своему усмотрению. прозрачный.
Благодаря этому эффекту вам больше не придется беспокоиться о скруглении углов каждого изображения. Этот эффект часто можно увидеть на некоторых демонстрационных страницах с изображениями и особенно подходит для списков с большим количеством изображений. Как насчет этого, эффект неплохой!
Хорошо, давайте посмотрим на механизм его реализации!
Принцип реализации:
Этот эффект на самом деле является вариантом, который я реализовал в главе 2. Давайте поговорим об основных кодах клавиш.
Основное изменение — это расположение фонового изображения, но на этот раз оно немного отличается от того, что было в главе 2. На этот раз вам нужно принять во внимание изменения в двух закругленных углах ниже.
Давайте сначала посмотрим на реализацию двух закругленных углов выше:
/*Расположение изображения со смещением — верхняя часть*/
.sharp b.b2{background-position:-4px сверху;}
.sharp b.b3{background-position:-2px -1px;}
.sharp b.b4{background-position:-1px -2px;}
Посмотрите на настройки стиля двух закругленных углов ниже. Нижняя часть и верхняя часть соответствуют друг другу.
/*Позиционирование смещения изображения — нижняя часть*/
.sharp b.b7{background-position:-4px внизу;}
.sharp b.b6{background-position:-2px внизу;}
.sharp b.b5{background-position:-1px внизу;}
Различные стили вызова изображений:
/*Цветовая схема первая, зеленая ----------------------------------------*/
/*Цвет границы*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{фон:#262626;}
/*Путь к изображению*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) нет -повторить;}
Первые два предложения вместе образуют значение цвета рамки, для которого необходимо установить одно и то же значение цвета. Следующее предложение устанавливает путь вызова изображения.
Всего три предложения, чтобы получить цветовую схему.