如何在html中插入背景图片

Mexly妹

于 2024-06-09 20:55:49 发布

阅读量879

点赞数 11

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/Mexly13/article/details/139566047

版权

在头标签<head></head>里，使用<style></style>标签，可以设置图片背景颜色、透明度等

opacity的范围是0-1，数值越大，背景的透明度更低即页面更清晰

<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
    <style>
        body {
            background-image: url('/assets/img/back3.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.98; /* 调整背景图片透明度 */
        }
        .content {
            margin: 60px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.7); /* 内容背景颜色和透明度 */
            color: black; /* 内容文字颜色 */
            position: relative;
            z-index: 1; /* 确保内容在背景图片之上 */
        }
        form {
            /* 添加表单样式 */
        }
    </style>
</head>

希望对你有用