时间戳

首页 > 解决方案 > 是否可以在边框上添加图像？

javascript - 是否可以在边框上添加图像？

问题描述

我希望你一切都好。我想在边框上添加图像。考虑一个 100px 实心的边框。我只想将图像放在边框上是否可以使用 CSS。就像我使用位置一样，z-index 但看不到效果。你可以看到代码。我只想在边框上显示图像而不是在边框上。示例https://i.imgur.com/1IA2Ddj.jpg 

<img width="30%" height="30%" src="https://i.imgur.com/deoFQ7i.png" />
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; max-width: 600px !important; border-left: 62px solid #fca9cf;">
    <tr class="container" style="">
        <td valign="top" style="background-image: url('https://i.imgur.com/deoFQ7i.png'); background-repeat: no-repeat; background-position: -20px; background-size: contain; border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                <tbody class="mcnTextBlockOuter">
                    <tr>
                        <td valign="top" class="mcnTextBlockInner" style="padding-top: 0px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%; min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" width="100%"
                            class="mcnTextContentContainer">
                                <tbody>
                                    <tr>
                                        <td valign="top" class="mcnTextContent" style="padding: 0px 18px 9px; line-height: 200%; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #603813; font-family: Helvetica; font-size: 16px; text-align: left;">
                                            <p style="                          font-family: philosopher;color: #603813;font-size: 24px;text-align: center;line-height: 200%;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
                                                <br />
                                                <br />
                                            </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

标签： javascripthtmlcsssass

解决方案

解决方案1：

.rectangle {
  background:pink;
  width:100px;height:150px;
  position:relative;
}

img {
  width:100px;position:absolute;
  right:-86px;
}
<div class="rectangle">
  <img src="https://i.imgur.com/deoFQ7i.png">
</div>

推荐阅读