我正在为我的摄影创建一个 wordpress 网站。在使用三个输入框创建与我联系的表单时,我在每个输入框的末尾添加了一个图像,用于:-
background-repeat: no-repeat;
background-position: 98% center;
background-size: auto 32px;
background-color: #f1f1f1;
后跟此代码以分配图像:-
input#name { background-image: url(images/icons/name.png); }
我遇到的问题是,当我为输入框提供焦点时,我可以只使用 following 来隐藏图像
input#name:focus { background-image: none; }
我可以,但是当它失去焦点时,它会将图像滑过输入框回到最右边。无论我如何尝试,我都不能让它重新出现在右边我试过使用图像而不是无图像;但这没有什么区别我看到一些网站,图像从黑色变为白色,而盒子改变颜色以表示这一点,它们工作正常,而我的图像从灰白色变为白色,请问有什么想法吗?
PS 恐怕我的网站还没有上线,无法展示发生了什么
最佳答案
你听起来像是在尝试生成这样的东西:
.wrap img{
height:30px;
width:30px;
position:absolute;
top:10%;
right:0;
transition:all 0.8s;
}
.wrap{
display:block;
height:30px;
width:220px;
position:relative;
margin:20px;
}
.wrap input{
height:30px;
width:220px;
}
.wrap input:focus + img{
opacity:0;
}
<div class="wrap">
<input type="text" placeholder="image only when not hovered"/>
<img src="http://placekitten.com/g/300/300" alt=""/>
</div>
<div class="wrap">
<input type="text" placeholder="another one?"/>
<img src="http://placekitten.com/g/300/200" alt=""/>
</div>
<div class="wrap">
<input type="text" placeholder="three is just greedy"/>
<img src="http://placekitten.com/g/200/300" alt=""/>
</div>
关于html - 输入框上的 CSS 背景图像似乎从左侧进入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28431129/