html – css背景图像定位(负面位置?)

html – css背景图像定位(负面位置?),第1张

概述我正在尝试添加一个位于边框顶部的图标,将其分成两半. 这是我到目前为止: <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> 我正在尝试添加一个位于边框顶部的图标,将其分成两半.

这是我到目前为止:

<HTML><head>    <Meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1">    <Title>UnTitled document</Title>    <style type="text/CSS">        body {            background-color:#26140C;        }        .Box {            wIDth: 800px;            margin: 0 auto;            margin-top: 40px;            padding: 10px;            border: 3px solID #A5927C;            background-color: #3D2216;            background-image: url(Contents/img/icon_neutral.png);            background-repeat: no-repeat;            background-position:10px -20px;        }    </style></head><body>    <div >        <h1>This is a test!</h1>    </div></body>

而不是像我希望的那样,图像超越边界,而是在它之下.

解决方法 背景图像在框内,因此将其移到外面是不可行的.您可以做的是将图像放在盒子外面并将其移入盒子中.

你可以尝试这样的东西,它不是万无一失的,但可以让你在那里的一些方式.

<HTML><head>        <Meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1">        <Title>UnTitled document</Title>        <style type="text/CSS">                body {                        background-color:#26140C;                }                .Box {                        wIDth: 800px;                        margin: 0 auto;                        margin-top: 40px;                        padding: 10px;                        border: 3px solID #A5927C;                        background-color: #3D2216;                }                .image {                    float: left;                    position: relative;                    top: -30px;                }        </style></head><body>        <div >            <img src='icon_neutral.png'  />                <h1>This is a test!</h1>        </div></body>
总结

以上是内存溢出为你收集整理的html – css背景图像定位(负面位置?)全部内容,希望文章能够帮你解决html – css背景图像定位(负面位置?)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1106997.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存