css属性操作 => input标签的基本设置以及body背景图片如何设置-优快云博客

本文介绍了两种设置网页背景图片的方法：一是直接通过body标签的样式属性设置背景图片并调整其显示效果；二是利用div标签结合绝对定位实现背景图片的展示，并确保图片能够铺满整个页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

#改变placeholder样式（和普通的样式一样的）

#txt::-webkit-input-placeholder{
color: white;
font-size: 18px;
line-height: 50px;
/*font-family: '楷体';*/
}

#使得input的背景是透明的

background-color:transparent;

#input输入框圆角

border-radius:5px;

#去除鼠标点击时input的边框

outline:none;

#设置body背景图片的方法

======================== 方法一 ===============================

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background: url('./1.jpg')top center no-repeat;
background-size:cover;">
<div id="onbackgroundbody" style="position: relative;top:200px;text-align:center;">
<input type="text" id="txt" name="" placeholder="百度一下" style= "border:0.5px solid white;width:800px;height:50px;border-radius:5px;outline:none;background-color:transparent;color:white;padding-left:25px;font-size: 18px;"/>
</div>
<style type="text/css">#txt::-webkit-input-placeholder{
color: white;
font-size: 18px;
line-height: 50px;
/*font-family: '楷体';*/
}</style>
</body>
</html>

======================== 方法二 ===============================

<div id="backgroundImage">
<img src="./1.jpg" />
</div>
<div id="onbackgroundbody" style="position: relative;top:200px;text-align:center;">
<input type="text" id="txt" name="" placeholder="百度一下" style= "border:0.5px solid white;width:800px;height:50px;border-radius:5px;outline:none;background-color:transparent;color:white;padding-left:25px;font-size: 18px;"/>
</div>
<style>
#txt::-webkit-input-placeholder{
color: white;
font-size: 18px;
line-height: 50px;
/*font-family: '楷体';*/
}
html{
width:100%;
height:100%;
margin:0;
padding:0;
}
body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#backgroundImage{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
}
#backgroundImage img{
width: 100%;
height: 100%;
}
/*#onbackgroundbody{
width: 100%;
height: 100%;
}*/
</style>