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

Question

[istasiik]

Есть вот такой элемент.

Прямоугольная маска с закругленными углами. На картинку внутри применен блюр, из за неприятной особенности края у него чуть светлее. Что бы убрать это я применил 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)
}

Или проблему с освещением краев можно решить по другому? Если скажете как - буду счастлив.

Answer 1

[Анна Бакурова]

Задайте картинку фоном а не через img и позиционируйте её через background-position
А чтобы убрать засвечивание, которое появилось из за фильтра blur:
тут есть два выхода - первый задавать background-color для родителя img который подходит больше под картинку или саму же картинку только не размытую.
А второй это для родителя установить box-shadow: inset 0 0 400px #000000;

Comments

[istasiik]

А если картинка подключается из html? Вот так вот:
<div><img alt="" src="img/background.png"></div>

[Анна Бакурова]

тогда родителю position: relative а картинке position: absolute; left: значение; top: значение;

[istasiik]

@Libris не работает, из за этого, почему то, перемещается маcка, обрезаются стороны

[Анна Бакурова]

@istasiik Вы можете ссылку на код кинуть? А то Я не знаю что Вы там написали и мне сложно диагностировать

[istasiik]

@Libris
CSS:

.block {

	position: relative; 
	width: 672px;
	height: 163px;
	
	margin: 9px;
	overflow: hidden;
	border-radius: 9px;
	z-index: 1;
	
}

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



.block .txt {
position: absolute;
bottom: 45px;
left: 100px;
width: 100%;
z-index:9999; 
   
}

.block .fav { 
position:absolute;
margin-top: 0px;
margin-left: 608px;
z-index:9999; 
opacity: 0.5;
cursor:pointer;
}

.block .fav:hover {
    opacity: 1;
}

.block .fav img { 
-webkit-filter: blur(0px) !important; 
width:22px; 
}

.block h3 {
font-family: 'proxima_nova_ltsemibold'; 
font-size:37px;
color:#FFFFFF;
width: 100%; 
margin:0;
padding-bottom: 0px;
}

.block p {
font-family: 'proxima_nova_ltlight'; 
font-size:19px;
color:#FFFFFF;
width: 100%; 
opacity:0.4;
padding-top: 8px;
margin:0;
}

HTML:

<div class="block">
<div class="fav"><img alt="" src="img/fav.png"></div>
<div><img alt="" src="img/background.png"></div>
<div class="fav"><img alt="" src="img/fav.png"></div>
<div class="txt">
<h3>Путешествие в лес</h3>
<p>13 вещей, общая цена 12643 руб</p>
</div>
</div>

[Анна Бакурова]

@istasiik Честно, Я сейчас в браузер ввела и ничего не понятно... Именно ссылка нужна где уже картинки стоят

[istasiik]

@Libris имеете ввиду загрузить картинки на фотохостинг и вставить туда адрес?

[Анна Бакурова]

@istasiik можете в песочнице показать или на свой домен загрузить сайт и кинуть ссылку

[istasiik]

@Libris jsfiddle.net/ax54orkd/3 вот, пожалуйста

[Анна Бакурова]

@istasiik тут есть два выхода - первый задавать background-color для родителя img который подходит больше под картинку или саму же картинку только не размытую.
А второй это для родителя установить box-shadow: inset 0 0 400px #000000; - роде работает и ответ нашла на форуме он к слову последний, а другие с позиционирование Вам не подходят. И пропишите картинке

position: absolute;
left: 0;
top: 0;

- а там уже задавайте для left и top если нужно любые значения, но relative там не катит. Ещё меня просто поражает эта озабоченность чужими проблемами здесь на форуме. Такое ощущение что тут 2 - 3 человека норм сидит и то не всегда

[Анна Бакурова]

@istasiik помогло?

[istasiik]

@Libris Спасибо! Я пытаюсь решить проблему вторым вариантом сейчас. А как поверх картинки наложить черный полупрозрачный прямоугольник, например? И еще, Можно ли картинку автоматом масштабировать средствами css?

[Анна Бакурова]

@istasiik поверх картинки нельзя а поверх родительского блока ( и в том числе картинке можно) так как img у нас не имеет before и after
пропишите

родительский_блок:after {
content: "";

width: 100%;
height: 100%;

position: absolute;
left: 0;
top: 0;

background: rgba(0, 0, 0, .3);  /* или полупрозрачная картинка*/
}

Что подразумевается под автоматически масштабировать? Какое поведение? Отметьте как решение, если Вам мои ответы помогли решить проблемы.

[istasiik]

@Libris Так, сейчас попробую. Что бы при загрузки картинки у нее был, например, масштаб 200%

[Анна Бакурова]

@istasiik вообще есть свойство zoom но мне кажется тут обычным width обойтись можно. Но про zoom почитайте. Правда при увеличении качество ухудшается что естественно

[istasiik]

Спасибо вам огромное! В итоге решил проблему width и наложением черной рамки сверху.

[Анна Бакурова]

@istasiik не за что) обращайтесь)

Answer 2

[Trow_eu]

попробуйте -25%

Comments

[istasiik]

В top? нет, не работает :c

Answer 3

[barkalov]

Или проблему с освещением краев можно решить по другому? Если скажете как - буду счастлив.

Попробуйте указать в .block (.img) background-color близкий среднему цвету картинки. Если я правильно понимаю, светлые края - не светлые, а прозрачные.

Comments

[istasiik]

картинки разные будут использоваться, палитры у них тоже разные

[barkalov]

Такова се ля ви. Вы же не удивляетесь (или удивляетесь?), что вам нужно прописывать разные цвета текста (черный\белый как минимум) в css для разных картинок? Прописывать background-color - в любом случае хорошая практика, страница не так "моргает" в процессе загрузки изображений.

Правильное решение подсказала @Libris - background-position + background-repeat.