Bymas | Вырезать через css

Топ дня:

AdRed

Тема закрыта by

_aanbek
Причина: всё сделал спасибо

И так есть картинка

Через css пробую вывести голову и плечи



<style>

.head

{

    overflow:hidden;

    width:70px;

    height: 70px;

    border: 1px #000 solid;

    margin: 5px;

    float: top;

    

    position: relative;

}



.head img

{

    position: absolute;

    top: 0;

	bottom: 2;

	left: 0;

	right: 0;

	margin: auto;

}

</style>

<div class="head"><img src="/mnk_<?=$user['id']?>.png"/></div>

но выводит только это
никто не знает как вывести только голову с плечами типа так

Изображение

------

61372_.png (1.0 Mb)
Скачиваний: 93

________
посл. ред. 14.01.2019 в 22:44; всего 1 раз(а); by _aanbek

То что ты пытаешься сделать - изменить позицию элемента.
Для атласов можно попробовать использовать background-position и background-size
________
посл. ред. 14.01.2019 в 23:17; всего 1 раз(а); by monobogdan

monobogdan, пример можно?

_aanbek,

<!DOCTYPE html>

<html>

<head>

	<title>My Website</title>

	<meta charset="UTF-8" />

	

	<style type="text/css">

		.atlas

        {

         background-image: url(https://i.pinimg.com/originals/fa/fa/07/fafa07f9cafb332dda5c1f4c45aaff5a.png  );   

         width: 32px;

         height: 64px;

         background-position: -194px -257px;

        }

	</style>

</head>



<body>

	<div class="atlas"></div>

</body>

</html>

https://codepen.io/marcysutton/pen/ZYqjPj

________
посл. ред. 14.01.2019 в 23:38; всего 1 раз(а); by monobogdan

monobogdan, я типа должен найти позицию головы и вывести её?

_aanbek, да, и указать её в background-position.

честно говоря, это изврат

Dizzy221, это единственная возможность нарезать атласы в вебе не прибегая к канвасу и серверсайду.

Dizzy221 (14.01.2019 в 23:39)
честно говоря, это изврат

В каком смысле?

width:140px;
и будет тебе счастье