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)
blank

相关推荐

  • Android启动模式之singleTask解析「建议收藏」

    Android启动模式之singleTask解析「建议收藏」在android应用程序中,最重要的组件之一Activity有4中启动模式,其中singleTask更加官方文档的描述很容易让人迷惑,其实原因在于,activity的启动方式除了受标签android:launchMode的影响之外,还会被启动参数所左右比如,intent的标志位FLAG_ACTIVITY_NEW_TASK,任务标签 android:taskAffinity。本文将对singleTa

  • hg261gu改桥接设置_HG220G_u光猫是千兆的吗

    hg261gu改桥接设置_HG220G_u光猫是千兆的吗背景最近换了光纤,装了光猫,型号是HG220GS-U,软件版本E00L3.01。改光猫自带wifi功能,和路由器一样,经过简单的设置就可以上网了。本来用的挺好,但是家里电子设备不少,后来发现ipad不能上网了。猜测有可能是光猫连接数量有限制。另外,以后打算在家里搭建NAS,免不了要桥接,正好一次性完成。教程在网上找了一圈,发现HG220的教程不少,但是HG220GS-U的基本没有。好多教程还…

  • SchedulerFactoryBean[通俗易懂]

    SchedulerFactoryBean[通俗易懂]&lt;?xmlversion="1.0"encoding="UTF-8"?&gt;&lt;beans&gt;&lt;beanid="scheduler"class="org.springframework.scheduling.quartz.SchedulerFactoryBean"lazy-init="false"&gt;&lt;prope

  • 深度相机种类_深度相机原理

    深度相机种类_深度相机原理本文首发于微信公众号:计算机视觉life。本文的深度相机制造商涉及:Microsoft、Intel、LeapMotion、Orbbec、图漾、OccipitalStructure、Stereolabs、DUO。文末附深度相机详细对比清单。MicrosoftKinect微软推出了两款Kinect,Kinect一代(Kinectv1)是基于结构光原理的深度相机,Kinect二代(Kine

    2022年10月30日
  • qt服务器主动断开tcp连接_qtcpsocket 多线程

    qt服务器主动断开tcp连接_qtcpsocket 多线程简述对于一个C/S结构的程序,客户端有些时候需要实时得知与服务器的连接状态。而对于客户端与服务器断开连接的因素很多,现在就目前遇到的情况进行一下总结。分为下面六种不同情况客户端网线断开客户端网络断开客户端通过HTTP代理连接服务器,代理机器断开代理客户端通过HTTP代理连接服务器,代理机器的网络断开客户端通过HTTP代理连接服务器,代理机器的网线断开服务器断开同时对于以上六种情况又分为连接服务器之…

发表回复

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

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