HTML背景图片设置

HTML背景图片设置背景:学习前端知识,自己做页面目的:学习前端知识组网图:不涉及工具:vscode1.41.0简介:HTML背景图片设置;HTML背景图片设置background-image:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><title&gt…

大家好,又见面了,我是你们的朋友全栈君。

背景:学习前端知识,自己做页面
目的:学习前端知识
组网图:不涉及
工具:vscode1.41.0
简介:HTML背景图片设置;
HTML背景图片设置background-image:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body { 
   
            background-image: url("imgs/btn1.png");
        }
    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
HTML背景图片设置 background-repeat:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        body { 
   
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
HTML背景图片设置background-size:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        body { 
   
            background-image: url("imgs/btn1.png");
            background-repeat: no-repeat;
            /* background-position: center; */
            background-size: 100px;
        }
    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
HTML背景图片设置代码演练:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>love</title>
    <style>
        #box { 
   
            text-align: center;
        }
        a { 
   
            display: inline-block;

            width: 160px;
            height: 40px;

            background-repeat: no-repeat;
            background-size: 100%;
        }
        #btn1 { 
   
            background-image: url("imgs/btn1.png");
        }
        #btn2 { 
   
            background-image: url("imgs/btn2.png");
        }
        #btn3 { 
   
            background-image: url("imgs/btn3.png");
        }
        #btn4 { 
   
            background-image: url("imgs/btn4.png");
        }
    </style>
</head>
<body>
    <div id="box">
        <a id="btn1" href="#"></a>
        <a id="btn2" href="#"></a>
        <a id="btn3" href="#"></a>
        <a id="btn4" href="#"></a>
    </div>

</body>
</html>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138612.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • LDA Effect Size分析 LEfSe详解

    LDA Effect Size分析 LEfSe详解LDAEffectSize分析LEfSe详解LEfSe的作用LEfSe的原理LEfSe的作用在介绍LEfSe的作用前,我们先解释一个概念——biomarker,维基百科给出的定义是Abio-marker,orbiologicalmarkerisameasurableindicatorofsomebiologicalstateorcondition.Biomarkersareoftenmeasuredandevaluatedtoexaminenorma

  • waypoint_使用jQuery Waypoint创建粘性导航标题

    waypoint_使用jQuery Waypoint创建粘性导航标题在本教程中,我们将创建一个导航栏,当您向下滚动时,它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。介绍克里斯·科耶尔(ChrisCoyier)在讨论:before和:after伪元素的优点时说:“每个人都喜欢丝带。”我已经看到这些程式化的三角形边缘的丝带在整个互联网上突然冒出(一个著名的例子是Facebook的IntroducingTimeline页面),尽管它…

    2022年10月21日
  • 学习使用口令激活成功教程工具:hashcat、LC、SamInside

    学习使用口令激活成功教程工具:hashcat、LC、SamInside在学习使用口令激活成功教程工具之前,我们要先创建一个用户账号,原理是利用其哈希值进行激活成功教程。很关键的一点是,要在虚拟机里面创建用户!!!很关键的一点是,要在虚拟机里面创建用户!!!很关键的一点是,要在虚拟机里面创建用户!!!重要的事情一定要说三遍。在宿主机(我是win10系统)创建用户获取的hash值是假的,根本无法用于激活成功教程。我个人猜测,是由于宿主机存在某种保护机制,使得不让获取到真正的hash。因…

  • sstream函数

    sstream函数使用stringstream对象简化类型转换C++标准库中的提供了比ANSIC的更高级的一些功能,即单纯性、类型安全和可扩展性。在本文中,我将展示怎样使用这些库来实现安全和自动的类型转换。为什么要学习如果你已习惯了风格的转换,也许你首先会问:为什么要花额外的精力来学习基于的类型转换呢?也许对下面一个简单的例子的回顾能够说服你。假设你想用sprintf()函数将一个

  • Linux下的经常使用性能查询命令top、vmstat、gprof、pidstat之对照

    Linux下的经常使用性能查询命令top、vmstat、gprof、pidstat之对照

  • 【软件工程】详细设计文档——详细设计说明书

    【软件工程】详细设计文档——详细设计说明书文章目录1引言1.1编写目的1.2项目背景1.3定义1.4参考资料2总体设计2.1需求概述2.2软件结构3模块描述3.1模块基本信息3.2功能概述3.3算法3.4模块处理逻辑3.5接口3.6性能3.7测试计划1引言1.1编写目的​ ​ 本报告的目的是对Asking进行详细设计说明,以便用户及项目开发人员了解产品详细的设计与实现。为开发人员提供开发参考书。以下叙述将结合文字描述、伪代码,图表等来描述Asking的详细设计和相关的模块描述。本报告的预期读者有客户、项目经

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号