首页 > 其他分享 >如何在html中插入背景图片

如何在html中插入背景图片

时间:2024-06-09 20:58:32浏览次数:30  
标签:opacity color 透明度 插入 html background 背景图片 255

在头标签<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>

希望对你有用

标签:opacity,color,透明度,插入,html,background,背景图片,255
From: https://blog.csdn.net/Mexly13/article/details/139566047

相关文章

  • 大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(中山)
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript广东传统文化
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 11.4 插入排序
    目录11.4 插入排序11.4.1 算法流程11.4.2 算法特性11.4.3 插入排序的优势11.4 插入排序插入排序(insertionsort)是一种简单的排序算法,它的工作原理与手动整理一副牌的过程非常相似。具体来说,我们在未排序区间选择一个基准元素,将该元素与其左侧已排序区......
  • [Java] Mybatis向Mysql插入主副表JSON数据
    ......
  • 初识HTML
    1.HTML基本结构在VSCode中,输入!即可生成一个基本的HTML结构:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • HTML 第一天
    标签语法<!--双标签--><strong>加粗</strong><!--单标签--><br><hr> 标签的关系<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metanam......
  • JavaScript html css 字符串对象
    字符串对象字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。length属性作用:获取字符串长度示例:<spanstyle="background-color:#f8f8f8"><spanstyle="color:#333333"><spanstyle="color:#770088">let</span><spanstyle=......
  • uni-app 中使用 html2canvas 生成图片
    1.在项目中安装html2canvas插件npminstallhtml2canvas-D在需要生成图片的页面中引入html2canvas插件不过此时需要在页面中新建一个script节点,将lang属性设置为renderjs如对renderjs不了解,可看下uniapp官网的说明2.编写生成图片的代码<template><view......
  • 每日一题(LeetCode · 35)搜索插入位置
    题目:给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(logn) 的算法。示例1:输入:nums=[1,3,5,6],target=5输出:2示例 2:输入:nums=[1,3,5,6],target......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(河南平顶山)
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......