如何在我的 SharePoint 网页上创建图像按钮

Question

我在我的页面上创建了一些按钮，现在想在按钮上添加全尺寸图像。

<table>
    <tr>
            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog()">
                    <span align="right" class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Finance & BD&L
                    </button>
            </th>

            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog2()">
                    <span align="right" class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Market Access
                    </button>
            </th>   
            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog3()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Business Excellence & Commercial operations 
                    </button>
            </th>


            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog4()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Legal & Compliance
                    </button>
            </th>   

    <tr>
            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog5()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Oncology BU
                    </button>
            </th>


            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog6()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Hematology BU
                    </button>
            </th>

            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog7()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span> Medical
                    </button>
            </th>

            <th>
                    <button type="button1" class="btn btn-default" onclick="openInDialog8()">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span> HR
                    </button>
            </th>
    </tr>

这是我的 HTML 代码按钮。我已将图像加载到我网站上的 "Documents" 页面并在代码中复制 url link，但内容编辑器仍然看不到此图像。我想，我的问题在 url，但我该如何解决这个问题？

这是css代码

    button [type="button1"] {
            margin-top: 5px;
            marring-left: 5px;
            padding-left: 10px;
            width: 260px; 
            height: 155px;
            background: url('https://share.novartis.net/sites/ruphoncology/Shared%20Documents/00218_300dpi_RGB.jpg');
    }

但是这个剂量有效

Answer 1

你的css代码应该是这样的，

[type=button1] {
    margin-top: 5px;
    margin-left: 5px;
    padding-left: 10px;
    width: 260px;
    height: 155px;
    background: url('https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&h=350');
    background-size: cover;
    background-position: center;
  }

我用了另外一张图片。你自己换。

如何在我的 SharePoint 网页上创建图像按钮

How can I create img-button on my SharePoint WebPage

html

css

sharepoint-2013

sharepoint-online

sharepoint-designer