当前位置：文江博客话题详情

如何在div上重叠图像？

发布于 2024-09-12 00:21:37 字数 104 浏览 5 评论 0原文

我想在 div 的边框上放置一个小的圆形登录图像，这样一半图像将在边框线之外，只是为了样式目的？我想我必须设置 z-index 但 OR 是如何存在的还有更好的办法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

物价感观 2024-09-19 00:21:37

这正是您需要做的。

给你 img 一个类名。然后在样式表中添加类似

#classname  
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}

z-index 的数字，该数字必须大于 div，如果您没有更改它，则其索引将为 0。

希望这有帮助。

Thats exactly what you need to do.

Give you img a class name. Then in your style sheet add something like this

#classname  
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}

z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.

Hope this helps.

回复收藏 0 原文

旧伤慢歌 2024-09-19 00:21:37

.overout {  
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}

.overout {  
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}

回复收藏 0 原文

谁把谁当真 2024-09-19 00:21:37

您可以使用 div 轻松地做到这一点。考虑下面的代码，

<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
 <div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
 </div>
</div>
</body>
</html>

您所要做的就是用“background-image”属性替换第二个 div 的“background-color”属性，并将该 div 嵌套在现有的 div 中。确保您的 div 大小与您的徽标完全相同，并设置背景重复：无重复；

希望有帮助。测试我发布的示例代码。您可以将所有样式信息放入 css 类中，如下所示：

.logo
{
   background-image: url(yourlogo.png);
   background-repeat: no-repeat;
   width:  /* width of logo */
   height: /* height of logo */
   top:    /* distance from top */
   left:   /* distance from left */
}

You can do this very easily using divs. Consider the following code

<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
 <div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
 </div>
</div>
</body>
</html>

All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;

Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:

.logo
{
   background-image: url(yourlogo.png);
   background-repeat: no-repeat;
   width:  /* width of logo */
   height: /* height of logo */
   top:    /* distance from top */
   left:   /* distance from left */
}

回复收藏 0 原文

~没有更多了~