background 設置文本框背景圖


background 屬性的作用是給元素設置背景,它是一個復合屬性,常用的子屬性如下:

  • background-color 指定元素的背景顏色。
  • background-image 指定元素的背景圖像。
  • background-position 指定背景圖像的位置,在復合屬性中與 size 二選一。
  • background-size 指定背景圖片的尺寸,在復合屬性中與 position 二選一。
  • background-repeat 指定如何重復背景圖像。

多數時候,我們都是給 div 等區塊元素設置背景,其實還可以通過 background 屬性來給文本框設置背景色和背景圖片。呈現效果如下:
07004

實現代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background 設置文本框背景圖</title>
    <style>
        .search {
            width: 600px;
            height: 40px;
            padding: 5px;
            border: 1px solid #666666;
            background-color: #FAF9DE;
            background-image: url(images/search.png);
            background-position: center right;
            background-size: 50px 50px;
            background-repeat: no-repeat;
        }
        .remark {
            width: 600px;
            height: 200px;
            padding: 5px;
            margin-top: 10px;
            border: 1px solid #666666;
            background: url(images/belle.jpg) center center no-repeat;
        }
    </style>
</head>
<body>
    <input class="search" type="text" placeholder="請輸入查詢關鍵詞"><br>
    <textarea class="remark" placeholder="請填寫備注信息"></textarea>
</body>
</html>

更多 background 屬性的知識可參考:

本文鏈接http://www.cnblogs.com/hanzongze/p/js-self-background.html
版權聲明:本文為博客園博主 韓宗澤 原創,作者保留署名權!歡迎通過轉載、演繹或其它傳播方式來使用本文,但必須在明顯位置給出作者署名和本文鏈接!個人博客,能力有限,若有不當之處,敬請批評指正,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM