html背景图上加文字和搜索框
时间: 2023-12-24 10:54:54 浏览: 72
图片作为背景并且是链接的写法(背景图片加链接)
可以使用以下代码来实现在背景图上加文字和搜索框:
```html
<html>
<head>
<style>
body {
background-image: url("background-image.jpg");
background-size: cover;
background-position: center;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
color: white;
font-size: 4rem;
text-shadow: 2px 2px 4px #000000;
margin-bottom: 2rem;
}
form {
display: flex;
align-items: center;
}
input[type="text"] {
padding: 0.5rem;
border-radius: 0.25rem;
border: none;
width: 20rem;
}
input[type="submit"] {
padding: 0.5rem 1rem;
border-radius: 0.25rem;
background-color: #4285f4;
color: white;
border: none;
margin-left: 1rem;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Welcome to my website</h1>
<form>
<input type="text" placeholder="Search...">
<input type="submit" value="Go">
</form>
</div>
</body>
</html>
```
这个代码会在背景图片上居中显示一个标题和搜索框。可以根据需要调整样式和布局。
阅读全文