png格式的img元素直接设置背景色border-radius等属性,不需再包裹div造成冗余
Posted chvias
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了png格式的img元素直接设置背景色border-radius等属性,不需再包裹div造成冗余相关的知识,希望对你有一定的参考价值。
原html结构
<div class="user-inform"> <div class="user-img"> <img src="http://coding.imweb.io/img/project/resume/avatar.png" alt="简历头像"> </div> </div>
原css结构
.user-inform .user-img { margin-top: 100px; margin-left: auto; margin-right: auto; width: 120px; height: 120px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 5px #88bde8; } .user-inform .user-img:hover { animation: circleRun 1s ease infinite; } @keyframes circleRun { 0% { box-shadow: 0 0 0 5px #88bde8; } 50% { box-shadow: 0 0 5px 10px #88bde8; } 100% { box-shadow: 0 0 0 5px #88bde8; } } .user-inform .user-img img{ position: absolute; width: 120px; height: 115px; }
得到老师的建议是,img是png格式的,所以完全可以设置img的背景色,以及border-radius,不需要在外面包裹div来做这些。
修改后的html结构
<div class="user-inform"> <img src="http://coding.imweb.io/img/project/resume/avatar.png" alt="简历头像"> </div>
修改后的cssl结构
.user-inform img{ width: 120px; height: 120px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #88bde8; } .user-inform img:hover { animation: circleRun 1s ease infinite; } @keyframes circleRun { 0% { box-shadow: 0 0 0 5px #88bde8; } 50% { box-shadow: 0 0 5px 10px #88bde8; } 100% { box-shadow: 0 0 0 5px #88bde8; } }
以上是关于png格式的img元素直接设置背景色border-radius等属性,不需再包裹div造成冗余的主要内容,如果未能解决你的问题,请参考以下文章