Как я могу сделать следующий стиль, используя только чистый CSS (изображение профиля с иконкой редактирования)?

Question

Я хочу разработать следующее с использованием чистого CSS?Пока я могу проектировать только без значка редактирования.Ниже приведены HTML и CSS, которые я до сих пор придумал:

<div>
    <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<style>
    .main-profile-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
</style>

Мне просто нужны html и css-код для значка редактирования в правом верхнем углу.

Answer 1

С вашим HTML:

Используйте псевдоэлемент как :after (я использую font awesome только для примера)

.main-profile-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
   position: relative;
}

.wrap {
  position: relative;
}

.wrap:after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f044";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid grey;
top: 0;
left: 113px;
background: white;
color: blue;
align-items: center;
display: flex;
justify-content: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<div class="wrap">
  <img src="https://i.stack.imgur.com/mSXoO.png" class="main-profile-img" />
</div>

С изменением HTML:

.main-profile-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position: relative;
}

.wrap {
  position: relative;
}

button {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid grey;
  top: 0;
  left: 113px;
  background: white;
  color: blue;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

<div class="wrap">
  <img src="https://i.stack.imgur.com/mSXoO.png" class="main-profile-img" />
  <button><i class="fas fa-edit"></i></button>
</div>

Answer 2

Использование inner span в качестве position:absolute

.user {
  width: 140px;
  height: 140px;
  border-radius: 100%;
  border:2px solid #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position:relative;
}

.user img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

span.icon {
  position: absolute;
  top: 10px;
  right: 0;
  background:#e2e2e2;
  border-radius:100%;
  width:30px;
  height:30px;
  line-height:30px;
  vertical-align:middle;
  text-align:center;
  color:#0000ff;
  font-size:14px;
  cursor:pointer;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div class="user">
  <img src="https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png" class="main-profile-img" />
  <span class="icon"><i class="fa fa-edit"></i></span>
</div>

Answer 3

div {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position: relative;
}

div img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

div i {
  position: absolute;
  top: 20px;
  right: -7px;
  /* border: 1px solid; */
  border-radius: 50%;
  /* padding: 11px; */
  height: 30px;
  width: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: cornflowerblue;
  box-shadow: 0 0 8px 3px #B8B8B8;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div>
  <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" class="main-profile-img" />
  <i class="fa fa-edit"></i>
</div>

Answer 4

Вы можете попробовать добавить position: absolute; к значку редактирования. Тестовый код ниже. Надеюсь, это решит нашу проблему

HTML

<div>
  <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<div class="edit-icon">
 <img src="static\assets\images\avatar.jpg"/>
</div>

CSS

 .main-profile-img {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   border-style: solid;
   border-color: #FFFFFF;
   box-shadow: 0 0 8px 3px #B8B8B8;
 }

.edit-icon {
    position: absolute;
    top: 15px;
    left: 120px;
    z-index: 1;
    border-radius: 50%;
}

JS FIddle Link: https://jsfiddle.net/SJ_KIllshot/wh0usc2y/

Answer 5

HTML-код здесь

<div>
<figure>
    <img src="https://image.shutterstock.com/image-vector/male-avatar-profile-picture-vector-260nw-221431012.jpg" class="main-profile-img" />
    <img class="editIcon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAkFBMVEX///86Ozs7PDvz8/M7Ozv09PT+/v79/f319fX4+Pg1NjZeXl5RUlJISEgqKys4OTgyMzMuLy8mKCjq6ura2trj4+NMTU1cXFzg4OAhIyO4uLhmZ2cnKSk/QECZmZmlpaXJycmVlZV9fX2urq51dXXCwsLGxsZxcXGLjIxlZmaNjY2qqqqfoKAcHh7R0dGDhISZT5zBAAAUh0lEQVR4nN1d6WKqOhAGF5CoBFCrWO1ij92X93+7mxUhZBeqvfw4zWmHJB8zk2+SDCEI6BVFrUKgKvQva13d6uN2vp/9HGOdLLnimP43qhX4X9oFL9lAKRs5y7KmF4cyB2EIs2J+DJT1kitJ6K+jJKG/jpOEySWxUOhYNjkVIltZJvIdZiG7QPGpqpf+b8LvZIV4wluZJFwkackKIrEocpI1Vxe4N31MYXi6ijt50+RHMuYdYYV4zHqfDHnlvMBFovGYdWQ4CQyysVm23XSsbpoWjiUcjBg8XCgfZbLEZiu4YwuAQ1FWA3DoA1ApKzR9LMPBoAYQQbyLxqIsMVVuuadWhhwgv4F78akQV4VIJRKZRXSyymfLNJhCAWAYpu+BKIstng9Y0XgoAETKXTw8vf+bzn7/upkvFABpN49FG+BoUDwKsgQJY4262dHfbD4O+69dmmUA0ov/hMpfaApushlcqgCSbm5bJooBjsLyPZB4hwBwTOx/8fSW5hnkd7IqeJ1i5aFGRNYRkywEBoCFql6kxUQcKpjBNkx08ZOlYGDukRKgWtYKYLFR+SApbCU+yOtNXxMpwMbIiCKFzKpHDp1206AKoN5EaaF45bJ1E62RURDfp5ldj/rSYGjywZG2XgLxpDP8I0pqAJez1LJHfQHM9ACHyH/09e7QcFMBxDZ7CtVQnfcFOBfgmSaaKk2UFTZVsKaqd/daQWowPgKY/Csce9S5D0K9D+LuLkNgqHd3oDfT0DZiYUQ8TobT3LZHfZmogQeZJ4UmQ6PDDQttoyrQHc4z1x51DVBpos2IcoNmhfp609daaFsB3FsD7MsHM70PLqpOrwA01Lv7CcYCwMnaFWDnPmigiafym89Jg+UeGOpND0kdIIL7cnEfNIZqIHsImEi8GQFDvekPvZsD/Nz5A+xE26ZQ7WkXDuBuWYmskC/qmyYQCePHk0nw/eUPMOwEoCFUe/rCsnD3XYms9sDQTUQaMZkgJkkwmUM3gG2RMwEODD74RWVh9h1wEe6L6qaRL1LGD4LH3A1g5xrMVQApTWATpbIwe+bz82QDgaGbKYlRUQ2bnWOPOgeop4mPou6v35XsAgC9HsLiiVZ4azmbUAI8kyZGehP9aMwmYPpQySJf1D9bGBJSXJaOseiA/2LUKggiI6XISdYUqn0I0yWISIPLrrgvqp5tusViL8YJL8jTovzapfjK07Tx06agF9HTxMdO7D3SIl+KizcAyAGyAsBB+CYdaQHCPFvfPS+HAas0UBUi87LhaTlSlFX54L1kwgvLZy4bLIgW1d4xR2J3uQ4g3N3cr/DIJXTEZ+E3kKxsGxZ+76VLFjB/rmQXc6ABGA5QIzNNFDvKw23S3cq2WVYEWMiXLAhEJou0qAYIb4LguwiVAGHxmhi0YtNpEeDQQoPURJXLhrB8iJlssIJABTAEL4zt5QDB6EGvFc+9CVsT/dQtOhXbgFWXLFQz2xEZS6fKeQjYr3oBaG2i2mVDmB8r2cUNUBBePgwmqRIg3TuwAGix1ebkg/RhfO70y4YwPVYPY3EKwxvxSHrH3VDmg3tbgP34oNZEaTfLY8CbXpyovyaSrVFN21wOcJB+nw/wLB+0CAHTbbUjvpplLYCAKOkuE37NAOZ3vQC09cFP5Sha7ybMt1V1ixsRCQEYBS9AChDuLQFabXdXJmrhg6RwZ/DBqpvFsaoOL6U1Aa7IHH992u6vh2rFw9ka9PNBosFHGxOlIuW2qm54A+oA8UCJQ7G5FCCYng3QJWFBAHhnD5D4Iqsu5r5YmShJOdnLABKivFiodteaTehmdTB94tXF1BcrgBOyfSEFCPfDy9HEoyIWlQNEIuW2qm6MohtCE9hEWb0ygGH273I04eCDXAQHcKy64SwTAAbSO5GRXoomHq1oQhDB/WXVLZAvUhPlgbn0znQ5uVCo9ph6AAzDHfNFnCFzk9Y1SBG2F/0v5YPvPhrEf6G+SOqd3NYARjFFKNwJB4HQkV/yQW+AI6rFdr1JXI2l9TvxxLhLgLY++O5EE8KiEyINKcAawtOdYG0AqPFBiYnahmrvjj4orFiWT7GoB5LXJgE4IhHNr4dqP/4mSn9RfIjdJE1LANKY7bdDtdczAaICjW7EbsruxAh/myZe/WiiIZvNE4keZHcihL9NEz9+ABsi2c1QlpkouxMh/GWaONcHCcCZFGDQvJMWwFSZotsPTfz40YSFBmM54zO2+LUZvaeJhkqAp24KjF8tRU7dNXiGDx660OBsIuumwPjVDZQPf8sHewRI8tpaANuM3++MvhMTnY2l3SQttjUoMn5fJkoLhy5oQgGQNi27s8H4/Zrovy4ArmVEXzUtu7PO+P3SRDca1AIMZHfWGL/fUM0TYKgcZNrdjALZnWDdmof0QhOeJho6mKjI+KxQMf6f90Gc1xaerhbjX6UPumgwMTB+v6Hav7xjgJJuyhl/xHYtep7Rv3ShwWls0U0JQIqw3xl9Fz6Yr20Athk/pAj7DdVcTbQtiwBO9T7Im5YAxAh7NtEOfNAAMN6wpkXGDynCqFeauO0C4JvWRKPlnBUC8U6CcB33SBORpwabPqgfZKLlniJsMn5VOWf8fkK1zk1UEqot9xlBmDQYv5YrNDV32jtU8zTRpgZvDRrMAZwHIuPXcrYpwl58MP4VgAMQYoSJsMstMH4vPhh34oOmQQbnRyGEibDLLTB+P5svrhqU8mBdgxIfpC8pIIQNxhfSuqf98GA07cREA70GM5LhBuZxnfGFyhHCPkI1Xx8MnQCyFD7I+FC+yw2mcQ+hmjPAgVSDFj6IZaGU8U9r3nH3NBF3YqIvkRbgJuP5wBRhFMt3uTnjd0oT3QAM9BqEHCC1UvzWmpbxO6SJ5K0LHzQBrN4spX4YNXe5a60wxj8z5aQeqsWeABsi6YueJjDRV9UhhFEzr63u4IrMxDN8cN2Fif4zaDCvAcQIJw3Gb4xgGGGXPphMsw40aAK4rwNECCPWTQlAwvgd0kQnPugIEDM+lRV3uTnjd7j5knQxipoAbmAToJnxzSZqG6olsy5M9GDQIBAAMj5U5bWBdWQEaGuiE08fPMtEUXUUobjLXWlY3OX2n9H7DjKhUoNtmoglAKmVirvcIuN3QBPJTRc+qDfRJB61ARKEznltHqtqwWfaO8BhIAGIETrntXlsvhCI7gDVJipvWvZaPkLonddmP6PHPYrvv84CuNP7IGkaSKqDcz4DlLXS3OX2XtlmIveFG8Cmif4YNUgQtqpDMY1rXpszTST8YXwYXhbXANzZAAyApDphBiy00s5r89h8eUBhA9P2fSGbrgsA20htASKE7VqgbM1btsvtvfAbvJe344C1cl/aajB0NlGMUPK8OOPrd7nPoYl4BvPbhIt87OwANkTIiV0WAIP2yREKxq8qFxjfiyY2+YAuG1GRp507QEsNJjFsA+SMH0h3uQXG99h8Qdc9fvs2vw34ecBPpaMPNjSo3SMKxKMxOOOrdrlHfJfb3weRebyQZvO3ypQ+CicN7ixNdMIZX3heeM3bLq/NxweReSzYUdv5W8Kf9FPqANDWByvGFw0CNte81XltXj4Yj5OHgtWbTyMu+1RYj6JOADHClsU3Z8DqvDaPzRcq8l6d44B3ipjs9kvnenWA9fOAzXtEQOLS8jVv3kqV1+YfqsHT4WH5dMhPVX9KxY6YAVrsEcmOUpIyftXKifG9TBQ9jE1Z6z2CyGQTBrEbgDrGH8kYv3aoxlTQoCvA4Cmv957kLlHZbRlKnKbpg49uAKNIdlaUdJdbYHxfE8Wyb83jN7NTYoH+nGMHgCc2azP+KLTZ5fajCQpwEcJm7/PphJ+zvdWfkuuswcm4xfi4OrLLXWf89i63pw+Snw+p2PtsPaS1RDEfbroCGIuMT6pr73LXQyqE0CtUq8z5NWv1nhykQh4GIg07gNbpPLLTvlq73I2YsZ7X5hKqcZHJDLZ7n60nvNPHAioA3tlpUIgogWTMUjI+xT+N/H0Qr1/uZJaBITLZYy49X8wWoBhwyY4zUzE+/WmT16b0QTRE3+cyy8Cvz/GPv2yrMLwDgHXGr6pTMH7IEQaCVqxCtYiJxLdABpC9OEB6Hx/FFThvE0UXN4i66UOrvDbXUI2JJKUc4GBAXt+hsvg7OE0NfroCrI7Obx8RpWD8qiPGvDaNiSKRZ/WSBdYiqw75YicmGo8jzvh138YI1ae3mPLa1DRBRH4y9ZoM0iI/MOdY1pou6xp0y/qccMZvDF6tXe5GR9gutwtN1AAGA6gEiCEuWHUJJg1vE603DdoACeNTEVlHSF6bB01QkWWqXXQiLyQzc86hRIPuWZ+yY/aFXW6XvDa9DwZ4DUq/qpbdTLjsc+qkQdXKiuxIQf+8Nh1NUJE30znbaLjhK3APXw4+qMz6lH1HoLnLLXZEm9emCtW4yAIaAOL3rlfMgvCIWtzbaVC9+AfaAA15bVCZ12byQdxnvlKhWVUDN0N2U/BQWgJUL/4FsGrx9GxZXlus3eX28EH0p5/MBBAVyNvz9KaVK8ChALBi/Ib7S/LaaksLqrw2sw+iwhyqAA5qHcEQ23uvfonJ1S533TtwXptql1uT16YJ1VhhsixPrchNlBaym0XiA1CWziMLg8kud53xLfLaLEwU+RWdV1isbLMDYH19sC4r+9SFR16bIVTjhbVsU12KNKNHwHqGanVZIIkSffLaTDRBCpMvKw1CkGY3j0s7DRr3iGTf8nDOa7OgCVLAXGECCPLd/GW7atTr+YIOW/NuzeHNeW2BEaDEB3HhkBk2X7K0XN89MBc8FyCTlQVRjnltVjSBC9EeagDCvNj92y7wIm7rwXmbaHDa5T4nr81ME7SA5hUKgDBLwfruW1rvmS/onBi/1rRsl/vUI8XpLRYfm/3MpQBBXswP202r9x34YKDJa6PVSQAqTm+x+ZruW3uTBGLP+1xWy2x+AOU0wURUeW3NXe7GI5ed3qKa0dcLq0yoDuQpOByHuGuibEcmikUUeW1MROY0stNbbL5xnGzTWnVIeXD6uVTIdjOKUhFZXhuYs4mHKa/NmiawbHLIeHUgL+c/241omWcC7CGvzTJUo7LjeI/nFSOkvK/1/TKx+LBJN+9Sn5XXZhWqMVny0SGQ5/uf48Qk25kPEoSSMNgur802VOOyn2UBbz/pF6fOBGhFE6zgn9fm5INYdv36XE36+gPY0rYyr015esuoeXqLMVSrZONa9oYZ4HmhWt07FHltTEQCsHl6iw1NOAwcXfsgFlHltVERCcDG6S02kYzPw/CkCWl1XnltTjTRF0BtqFarzi+vzT5Uu7CJBp55bW40YamVzkdRVp1/Xps1TQR9+qARYADERYpQtcutzGvr1gedQjWLrE//vDarUO3SPoia9s5rc/DBXzBRTdO+eW2X9EFbmmBN++W1udFEFwD93yHzymvrVivnb75on61PXlt8DTRhnUpwTl7bBWnCIRkESLYPmowfNgFanN5yHTTB30A6P6/tKkO1k/Gckdd2zaFajc2889p+zQe9TkerN+2d13ZGp3/NB2O+y+2e13btoVq9ab+8tuud0bcjSq+8tusP1WqyPnltUQda6X8UlexyO+a1XXWodmKz2i63Y17bJUI1J5pgnuSd1/YHaIKK+Oa19Q6wA5pgIsq8NlKdBKD5q2RXEKq1d7kd89ouEar5vb8S+Oa1/REfJCLmvDZxTVzzVbJLbb4EShMNtHltPl8lu5ZQrSbikdcmMv41m2jgk9cGZ95a+b1Q7VRdLDtTRJ/XBvfOrVyGJmgh+moDlJ3eUl+uSs8F2PXmi26HIV6UbYCS01sa63Hp6q/4IC58F22Ahry2MD3GFzBRG4aSTVs/c0lem7jmLayoZodW2teV+iAuTN3z2tCfh6pWLj+jF5teyADWGH8ftvPaRoP02VUrPW++aJrGR/q1RxP6bXGc1zYPq6ueFfXi1soFQjVeiGdQlnkNMKeTNW9+wIOwXFUsr2vzRV3dcSdPLb8NWF7brWzRn4Sm108T5C97KAMYZj9c5DGTAURK/LD/ItIlQjVeeMylAMP8g88An3IpwHCUb6xbuRRNoOuB26jIB+kxqUTkAAcAf97zspsvQ2PTq70s0wRf5ZLPPIalHCD99t51+2CwmAMFwBCwm1Aza9maOLkBH+50FaGaqumVEuAI/KMieDB5z1p5bZxBs9ky6BRgJzP6kw/ulQAHaKAhsnhJ+JnNHyWrOQOQPZ0PsJdQDV13qcoHEYBiQwHiWk4vX8sOCijWSI3m7W6nUK0TmviepyMlQP5uGtnljoLXTA0QeWzxchyeAVAXqnmb6PA4LeREz5Dk9/Wbvg1n/IJ0/nPE77TSVmuFiBfiqhAJIkFbJFaJSGQl1cWb7WGfyo5KrBXyVQ0gGU31p5HALE3T/Ww9vfi1vtmjrmSaF1XpeQaHBsDgobQ5xBhCQC/+U3PBVqErWQj13aSFr1UDIJ5fGAFKVpX1j/GXZRsi2csJILHz+Ln8nwBkhWJVASQuHU+CQ2bzaK4eIBPJ76Jq6MU/8cr3AkI3DV7Xw2h2E9wMq1dyCeMTPW7Lvw+wmtk+VIemUManVHOQv2Z+qU6fATC9E1dC6TWeZYY7/wjA/FY89obrk81E/qqJVmvZ60UsBYj+t8HHw/1VgFW+3n6lBIi/19DOl/4jPFidVrxfRU2AdJjhE/nNXr6y+HcAziqADBJJ+2KzKPy/zay58PZHNFgtr72JPhhTPkyqSVkQH0ooBTi6YoA8Kbh8FI+9oV8li5oLv1uYqSu/5kEm3x9jESBdTGDffaqm1YtDKUuEu3KAoHhXH//WBBhP4u9ZKUujuqSJGkRA+baMJ3qA/NtTVO5hjabRrKpqc/FUaF1tkb5kJSIwT2+XQQWQj5vV57TYKJowgFzT3z/zIgPKeq/mAnlBjn1LqhOM+LjJITFW5MeVcjn0/8nz+7rc5RmA5nYucUGQ5cVu+vidNDpeAeSQ4tO/tULE/jx8eHp8mc33l0bTvvbz9cvd9nvY7K908e8/kp8zQV90OwoAAAAASUVORK5CYII=" />
    </figure>
</div>

CSS-код здесь

figure{
  width: 140px;
  height: 140px;
  position: relative;
}
    .main-profile-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
    .editIcon{
      position: absolute;
      right: -10px;
      top: 0px;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 100%;
      box-shadow: 0 0 8px 3px #B8B8B8
    }

Fiddle Link

https://jsfiddle.net/Lrgexwc4/1/