@istasiik

Как переместить картинку внутри маски?

Есть вот такой элемент.
sc3gwLq.png
Прямоугольная маска с закругленными углами. На картинку внутри применен блюр, из за неприятной особенности края у него чуть светлее. Что бы убрать это я применил right:25%; top: 25%; к самой картинке внутри блока. Слева она отодвинулась, а сверху - нет. В чем может быть причина? Вот css блока и картинки:
.block {
	position: relative; 
	width: 672px;
	height: 163px;
	
	margin: 9px;
	overflow: hidden;
	border-radius: 9px;
	z-index: 1;
	
}

.block img {
        position: relative;
	right:25%;
	top: 25%;
	display: block;
	-webkit-filter: blur(10px)
}


Или проблему с освещением краев можно решить по другому? Если скажете как - буду счастлив.
  • Вопрос задан
  • 2675 просмотров
Решения вопроса 1
Задайте картинку фоном а не через img и позиционируйте её через background-position
А чтобы убрать засвечивание, которое появилось из за фильтра blur:
тут есть два выхода - первый задавать background-color для родителя img который подходит больше под картинку или саму же картинку только не размытую.
А второй это для родителя установить box-shadow: inset 0 0 400px #000000;
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Trow_eu
@Trow_eu
попробуйте -25%
Ответ написан
barkalov
@barkalov
Или проблему с освещением краев можно решить по другому? Если скажете как - буду счастлив.
Попробуйте указать в .block (.img) background-color близкий среднему цвету картинки. Если я правильно понимаю, светлые края - не светлые, а прозрачные.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы