如何实现一个包含角落和文字内部图像的方框？

Question

我正在尝试实现类似于下面的内容。我想要一个盒子里的文字和左上角的图标。即使页面调整大小，图标也应保留在左上角。

我正在尝试在引导页面的上下文中实现它。我尝试使用jumbotron但未成功，但我认为它不是为了这个目的。

我应该采取什么方法？

Answer 1

＆＃13;

＆＃13;

.text{
  margin: 50px 0px 0px 50px;
  width: 400px;
  height: 400px;
  background-color: yellow;
}

.image-1{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}

＆＃13;

<div class="text">
text text text text text 
text text text text text 
text text text text text 
text text text text text 
text text text text text 
text text text text text 
text text text text text 
text text text text text 
</div>
<img src="https://mylocal-media.s3.amazonaws.com/uploads/file_asset/file/13234/housestamp.png" class="image-1" />

＆＃13;

＆＃13;

＆＃13;

下面是一些简单的代码，可能就是你要找的东西。如果您需要进一步的帮助，请告诉我。

Answer 2

这可能是伪元素的情况，因为房子是一个图标。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/navigation_time"
    android:icon="@drawable/ic_time"
    android:tint="@color/unselected"
    android:title="@string/title_time"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_late"
    android:icon="@drawable/ic_late"
    android:tint="@color/unselected"
    android:title="@string/title_late"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_file"
    android:icon="@drawable/ic_file"
    android:tint="@color/unselected"
    android:title="@string/title_file"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_attach"
    android:icon="@drawable/ic_attach"
    android:tint="@color/colorPrimaryDark"
    android:title="@string/title_attach"
    app:showAsAction="always|withText" />

<item
    android:id="@+id/navigation_table"
    android:icon="@drawable/ic_table"
    android:tint="@color/colorPrimaryDark"
    android:title="@string/title_table"
    app:showAsAction="always|withText" />

.realestate {
  border:2px black solid;
  padding: 75px;
  position: relative;
  margin: 50px
}

.realestate::after{
  content: '';
  display: block;
  width: 100px; /*Width of image*/
  height: 100px; /*Height of image*/
  position: absolute;
  top: -50px;
  left: -50px;
  background-image:url(https://www.fillmurray.com/100/100);
}

显然，用您选择的图像替换Bill。