时间戳

首页 > 解决方案 > 在不缩放图像的情况下增加 png 图像的背景大小

javascript - 在不缩放图像的情况下增加 png 图像的背景大小

问题描述

我试图使我的下拉菜单向下箭头（这是一个 png 图像）背景尺寸更大。

因此，当我将鼠标悬停在 div 上时，我可以通过简单地添加背景颜色来执行此操作。

现在的情况

我试图实现的是使向下箭头后面的白色圆圈更大，但不缩放或改变我的向下箭头的大小。

这是我的代码：

HTML

<div class="right-menu">
    <span class="helper"></span><img src="https://image.flaticon.com/icons/svg/1738/1738760.svg" alt="account" width="40">
    <span class="helper"></span><img id="down-arrow" src="https://image.flaticon.com/icons/svg/271/271210.svg" alt="down-arrow" width="15">
</div>

CSS

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
} 

.right-menu {
    float: right;
    position: relative;
    height: 100%;
    right: 2%;
}

.right-menu:hover > #down-arrow{
    border-radius: 50%;
    background-color: white;
}

.right-menu img{
    padding: 2px;
    vertical-align: middle;
    max-height: 80%;
    transition: ease 0.2s;
}

**更新：JSFiddle：https ://jsfiddle.net/u7qrnjwp/

标签： javascripthtmlcss

解决方案

像这样的东西？

body {
	background: pink;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
} 

.right-menu {
    float: right;
    position: relative;
    height: 100%;
    right: 2%;
}

.right-menu:hover > #down-arrow{
    border-radius: 50%;
    background-color: white;
    transition: ease 0.2s;
}
.icon-account {
	display: inline-block;
}
#down-arrow {
	height: 25px;
	width: 25px;
	text-align: center;
    display: inline-block;
}

.right-menu img { 
    vertical-align: middle;  
    transition: ease 0.2s;
}
<div class="right-menu">
    <div class="icon-account"><span class="helper"></span><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4Ij48cGF0aCBkPSJtNTEyIDI1NmMwLTE0MS40ODgyODEtMTE0LjQ5NjA5NC0yNTYtMjU2LTI1Ni0xNDEuNDg4MjgxIDAtMjU2IDExNC40OTYwOTQtMjU2IDI1NiAwIDE0MC4yMzQzNzUgMTEzLjUzOTA2MiAyNTYgMjU2IDI1NiAxNDEuODc1IDAgMjU2LTExNS4xMjEwOTQgMjU2LTI1NnptLTI1Ni0yMjZjMTI0LjYxNzE4OCAwIDIyNiAxMDEuMzgyODEyIDIyNiAyMjYgMCA0NS41ODU5MzgtMTMuNTU4NTk0IDg5LjQwMjM0NC0zOC43MDMxMjUgMTI2LjUxNTYyNS0xMDAuOTY4NzUtMTA4LjYwOTM3NS0yNzMuNDQxNDA2LTEwOC44MDQ2ODctMzc0LjU5Mzc1IDAtMjUuMTQ0NTMxLTM3LjExMzI4MS0zOC43MDMxMjUtODAuOTI5Njg3LTM4LjcwMzEyNS0xMjYuNTE1NjI1IDAtMTI0LjYxNzE4OCAxMDEuMzgyODEyLTIyNiAyMjYtMjI2em0tMTY4LjU4NTkzOCAzNzYuNWM4OS43NzM0MzgtMTAwLjY5NTMxMiAyNDcuNDIxODc2LTEwMC42NzE4NzUgMzM3LjE2Nzk2OSAwLTkwLjA3NDIxOSAxMDAuNzczNDM4LTI0Ny4wNTQ2ODcgMTAwLjgwNDY4OC0zMzcuMTY3OTY5IDB6bTAgMCIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Im0yNTYgMjcxYzQ5LjYyNSAwIDkwLTQwLjM3NSA5MC05MHYtMzBjMC00OS42MjUtNDAuMzc1LTkwLTkwLTkwcy05MCA0MC4zNzUtOTAgOTB2MzBjMCA0OS42MjUgNDAuMzc1IDkwIDkwIDkwem0tNjAtMTIwYzAtMzMuMDg1OTM4IDI2LjkxNDA2Mi02MCA2MC02MHM2MCAyNi45MTQwNjIgNjAgNjB2MzBjMCAzMy4wODU5MzgtMjYuOTE0MDYyIDYwLTYwIDYwcy02MC0yNi45MTQwNjItNjAtNjB6bTAgMCIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPgo=" alt="account" width="40" /></div>
    <div id="down-arrow"><span class="helper"></span><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ4NC4xMzIsMTI0Ljk4NmwtMTYuMTE2LTE2LjIyOGMtNS4wNzItNS4wNjgtMTEuODItNy44Ni0xOS4wMzItNy44NmMtNy4yMDgsMC0xMy45NjQsMi43OTItMTkuMDM2LDcuODZsLTE4My44NCwxODMuODQ4ICAgIEw2Mi4wNTYsMTA4LjU1NGMtNS4wNjQtNS4wNjgtMTEuODItNy44NTYtMTkuMDI4LTcuODU2cy0xMy45NjgsMi43ODgtMTkuMDM2LDcuODU2bC0xNi4xMiwxNi4xMjggICAgYy0xMC40OTYsMTAuNDg4LTEwLjQ5NiwyNy41NzIsMCwzOC4wNmwyMTkuMTM2LDIxOS45MjRjNS4wNjQsNS4wNjQsMTEuODEyLDguNjMyLDE5LjA4NCw4LjYzMmgwLjA4NCAgICBjNy4yMTIsMCwxMy45Ni0zLjU3MiwxOS4wMjQtOC42MzJsMjE4LjkzMi0yMTkuMzI4YzUuMDcyLTUuMDY0LDcuODU2LTEyLjAxNiw3Ljg2NC0xOS4yMjQgICAgQzQ5MS45OTYsMTM2LjkwMiw0ODkuMjA0LDEzMC4wNDYsNDg0LjEzMiwxMjQuOTg2eiIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" alt="down-arrow" width="15" /></div>
</div>

推荐阅读