亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css 中background 設(shè)置文本框背景圖 的方法

  發(fā)布時間：2019-07-22 15:34:56   作者：佚名   我要評論
這篇文章主要介紹了css 中background 設(shè)置文本框背景圖 的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

background 屬性的作用是給元素設(shè)置背景，它是一個復(fù)合屬性，常用的子屬性如下：

•background-color 指定元素的背景顏色。

 •background-image 指定元素的背景圖像。

•background-position 指定背景圖像的位置，在復(fù)合屬性中與 size 二選一。

•background-size 指定背景圖片的尺寸，在復(fù)合屬性中與 position 二選一。

•background-repeat 指定如何重復(fù)背景圖像。

多數(shù)時候，我們都是給 div 等區(qū)塊元素設(shè)置背景，其實還可以通過 background 屬性來給文本框設(shè)置背景色和背景圖片。呈現(xiàn)效果如下：

實現(xiàn)代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background 設(shè)置文本框背景圖</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="請輸入查詢關(guān)鍵詞"><br>
    <textarea class="remark" placeholder="請?zhí)顚憘渥⑿畔?quot;></textarea>
</body>
</html>

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

•CSS background 屬性

•CSS background 屬性

總結(jié)

以上所述是小編給大家介紹的css 中background 設(shè)置文本框背景圖 的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

相關(guān)文章

  • css background-attachment屬性進(jìn)階

    前提是定義了background-image屬性，然后用background-attachment來指明背景圖的位置是固定于視口的，還是隨著包含塊移動的。可簡單理解為定義背景圖片隨滾動軸的移動方式
    2017-03-08

  • css 背景固定樣式background-attachment屬性基礎(chǔ)

    這篇文章主要為大家介紹了在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動,需要的朋友可以參考下
    2017-03-08

  • css background 背景圖的設(shè)置方法

    下面小編就為大家?guī)硪黄猚ss background 背景圖的設(shè)置方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-30

  • CSS background全部匯總

    下面小編就為大家?guī)硪黄狢SS background全部匯總。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-19

  • CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)

    這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下
    2016-06-13

  • CSS制作邊框效果的技巧總結(jié)

    邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結(jié),尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下
    2016-05-27

  • 詳解使用CSS固定頁面背景圖片位置的方法

    固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進(jìn)一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:
    2016-05-17

  • 使用CSS3來實現(xiàn)滾動視差效果的教程

    這篇文章主要介紹了使用CSS3來實現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下
    2015-08-24

最新評論