html - 设置文本框的可点击背景

Question

我需要设置可点击的文本框背景图像，所以我在包含图像的文本框上方使用了 div(position:absolute) 标签，但问题是图像位于文本上方，我试图将图像的 z-index 设置为 - 1 但随后图像落后于 textarea

#smiley {
        position:absolute;
       z-index:1;
    }

 <telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
                        <div id="smiley">
                            <img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
                        </div>
                        <telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
                            EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">

                             </telerik:RadTextBox>

Answer 1

尝试这个

HTML

<input type="text" id="smiley" /> <input type="text" id="smiley1" />

CSS

#smiley:focus{background: red;} #smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}

关联