Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты
Категории Все вопросы проекта Компьютеры, Интернет Темы для взрослых Авто, Мото Красота и Здоровье Товары и Услуги Бизнес, Финансы Наука, Техника, Языки Философия, Непознанное Города и Страны Образование Фотография, Видеосъемка Гороскопы, Магия, Гадания Общество, Политика, СМИ Юридическая консультация Досуг, Развлечения Путешествия, Туризм Юмор Еда, Кулинария Работа, Карьера О проектах Mail Животные, Растения Семья, Дом, Дети Другое Знакомства, Любовь, Отношения Спорт Золотой фонд Искусство и Культура Стиль, Мода, Звезды Полный список Спросить Лидеры
Поиск по вопросам

Html css помогите для вас это мелочь . вопрос с   border-radius: 50%; . имеется скрин

Карлом Кеин Ученик (91), на голосовании 13 часов назад
хочу чтобы края картинки тоже были видны но мутно как на картинке. подкиньте код
Голосование за лучший ответ
Андрей Высший разум (460590) 1 месяц назад
Самые простые способы, пришедшие в голову:

Вариант 1: Поверх фотографии накладывается подготовленное png-изображение с прозрачным центром и полупрозрачными краями.

Вариант 2: Поверх прямоугольного тега с фотографией, в котором к фотографии применены фильтры снижения цветности / контрастности, накладывается другой тег с border-radius: 50%; и с той же самой фотографией, но уже полноцветной.

И в обоих случаях производится накладывание HTML-тегов.
⚠Оракул (50099) 1 месяц назад 
 ну
первый способ
легче
⚠ Оракул (50099) 
 <style>
svg{background: url('1.jpg'); } </style>
<svg viewbox="0 0 50 50" width="500" height="500">
<defs>
<mask id="mask" x="0" y="0" width="50" height="50">
<rect x="0" y="0" width="500" height="500" fill="#fff"/>      <circle cx="25" cy="25" r="25" /></mask></defs>
<rect x="0" y="0" width="500" height="500"   mask="url(#mask)" fill-opacity="0.5"/></svg>
⚠Оракул (50099) 1 месяц назад 
   <style> 
   .round { 
    border-radius-transparent: 50%; 
   } 
  </style> 
  
  <img src="foto.jpg" alt="" class="round">
Карлом Кеин Ученик (91) ⚠, можно полный код
⚠Оракул (50099) 1 месяц назад
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263664) 1 месяц назад
https://codepen.io/VISTASTER/pen/rNXzZbY ·
⚠Оракул (50099) 1 месяц назад 
 ты
замутил
фото
⚠ Оракул (50099) 
 <style> svg{ background: url('1.jpg'); }</style>
<svg viewbox="0 0 50 50" width="500" height="500">
<defs>
<mask id="mask" x="0" y="0" width="50" height="50">       <rect x="0" y="0" width="500" height="500" fill="#fff"/>      <circle cx="25" cy="25" r="25" />     </mask></defs>
<rect x="0" y="0" width="500" height="500"   mask="url(#mask)" fill-opacity="0.5"/></svg>
Похожие вопросы