Html 重叠边框和文本/文本重叠图像_Html_Css_Image_Text_Overlap

Html 重叠边框和文本/文本重叠图像

html css image text

Html 重叠边框和文本/文本重叠图像,html,css,image,text,overlap,Html,Css,Image,Text,Overlap,为了实现下面示例中的布局，我想用与文本重叠的边框和与图像重叠的文本设置导航样式我尝试了不同的方法，但没有任何效果例如：以下是我到目前为止得到的信息：。菜单链接{ 列表样式：无；保证金：2rem 0；文本对齐：右对齐；边框：1px白色固体； } .菜单链接a{ 文字装饰：无；字体系列：“蒙特塞拉特”，无衬线；颜色：rgba（255，255，255，0.8）；字号：4rem；文本转换：大写； } img{ 显示：块；对象匹配：覆盖； } .介绍图像{ 位置：相对位置；

为了实现下面示例中的布局，我想用与文本重叠的边框和与图像重叠的文本设置导航样式

我尝试了不同的方法，但没有任何效果

例如：

以下是我到目前为止得到的信息：

。菜单链接{
列表样式：无；
保证金：2rem 0；
文本对齐：右对齐；
边框：1px白色固体；
}
.菜单链接a{
文字装饰：无；
字体系列：“蒙特塞拉特”，无衬线；
颜色：rgba（255，255，255，0.8）；
字号：4rem；
文本转换：大写；
}
img{
显示：块；
对象匹配：覆盖；
}
.介绍图像{
位置：相对位置；
宽度：100%；
}
.intro图像：：之后{
内容：“；
背景图像：线性梯度（rgba（0,0,0,0.7），rgba（0,0,0,0.7））；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}


前端开发人员
用户界面设计器

您可以使元素具有固定的宽度和高度。如果位置值为负值，则可以使其跳出框外。我不知道这是否是你想要的：

html:

position:relative

确保绝对位置相对于框而不是整个屏幕。

您发布的代码片段与您发布的图像完全不同。我想你遗漏了一些款式。

<html>
<head>

</head>
<body>
  <div id="wrapper">
    <div class="box">
      <h1>About</h1>
    </div>
    <div class="box">
      <h1>Projects</h1>
    </div>
    <div class="box">
      <h1>Contact</h1>
    </div>
  </div>
</body>
</html>

#wrapper
{
  position:absolute;
  right:150px;
}

.box
{
  position:relative;
  border: 1px solid black;
  width:200px;
  height: 50px;
}

.box h1
{
  position:absolute;
  right: -50px;
  top:-18px;
}