Question

我想知道如何在css中管理这样的事情。

我的意思是 M ，在我的情况下，这是一张信件的图片，必须越过边框。

我在tipeeestream上尝试了一个事件列表，我尝试了一些事情，但是没有用。问题是，我没有获得关于他们的CSS风格的好资源，我必须得到关于他们的css sytle的浏览器的信息。

有人可以帮帮我吗？

编辑：这是我的编辑器中的css代码

＆＃13;

 .event .left {
    border-style: solid;
    border-width: 3px 0 3px 3px;
    border-color: black; 
 }
.left {
    
    position:relative;
    width: 50px;
    
}
.left:after {
    content: "";
    position:absolute;
    overflow:visible;
    width: 100px;
    height: 100px;
    display: block;
}
.event .middle, .event .right {
    border-style: solid;
    border-width: 3px 3px 3px 0;
    border-color: black;
}
.event.middle-event .middle, .event.middle-event .left, .event.middle-event .right{
    background: transparent;
    border-style: none;
}
.event.last-event .middle, .event.last-event .left, .event.last-event .right{
    background: transparent;
}

＆＃13;

Answer 1

您可以尝试对每个元素，背景，M和“eanwhile”进行绝对和相对定位。

http://codepen.io/ruchiccio/pen/zBoGXY

<div id="background">
  <div id="m">M</div>
<div id="title">eanwhile</div>
</div>

#background {width:500px; height:100px; background-color: yellow; border:4px solid black; position:relative;}

#m {font-size:220px; position:absolute; top:-80px;}

#title {font-size:70px; position:absolute; top:10px; left:180px;}

Answer 2

您可以设置溢出：对包含图像的元素可见，然后将图像显示为负边距。

例如：

<Logger name="org.hibernate.type.descriptor.sql.BasicBinder" level="trace" additivity="false"> 
    <AppenderRef ref="Console"/> 
</Logger> 
<Logger name="org.hibernate.type.EnumType" level="trace" additivity="false"> 
    <AppenderRef ref="Console"/>
</Logger>

我使用内联样式设置样式仅用于演示目的，如果您想遵循最佳实践，则应使用类应用样式。

Answer 3

正如评论者所提到的，请包含您下次到目前为止尝试过的代码。

使用CSS，最简单的方法是将带边框的元素（我选择类.box）设置为position:relative;。然后将图像放在框中，并将其位置设置为：position:absolute;。在此之后，您可以相对于.box自由移动图像。以下是一个示例：http://jsbin.com/dimonilife/edit?html,css,output

我如何在css的边框上方放置图片？

3 个答案: