css 中background 设定文字框情况图的方式

日期：2021-01-20 类型：科技新闻我要分享

关键词：上线了小程序官网，年会抽奖小程序免费，做小程序，小程序网站，跑腿小程序

background 特性的功效是给元素设定情况，它是1个复合型特性，常见的子特性以下：

•background-color 特定元素的情况色调。

•background-image 特定元素的情况图象。

•background-position 特定情况图象的部位，在复合型特性中与 size 2选1。

•background-size 特定情况照片的规格，在复合型特性中与 position 2选1。

•background-repeat 特定怎样反复情况图象。

大部分情况下，大家全是给 div 等区块元素设定情况，实际上还能够根据 background 特性来给文字框设定情况色和情况照片。展现实际效果以下：

完成编码以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF⑻">
    <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 特性的专业知识可参照：

•CSS background 特性

总结

以上所述是网编给大伙儿详细介绍的css 中background 设定文字框情况图的方式,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：纯 CSS 制做真实的 iphone7 返回下一篇：没有了

css 中background 设定文字框情况图 的方式

css 中background 设定文字框情况图的方式