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 中background 设定文字框情况图 的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

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