我需要將元素的背景圖像移到元素之外。 是否可以使用CSS或Javascript？

Question

這是哈彭寧-

我需要這個-

我需要將元素的背景圖像（橙色圓圈）移到元素外部。 是否可以使用CSS或Javascript？ 由於HTML的結構，我不能在div中使用另一個元素。 僅在可能的情況下需要使用：after來進行操作。

  .element:after {
        display: inline-block;
        content: "";
        height: 250px;
        width: 217px;
        position: absolute;
        border-bottom: 1px solid #ff9400;
        border-left: 1px solid #FF9400;
        z-index: 15;
        background: url('files/images/icon5.png') no-repeat;
        background-position: 100% 100%;
    }

只需將我的icon5.png移出元素框即可。

Answer 1

這就是你想做的。 定義僅包含圖像的背景元素。 根據您的需要調整大小。 然后在其中創建一個較小的元素。 以下是我的意思的示例：

<style>
#BACKGROUND {background: url("testimage.jpg");width:50px;height:50px;}
#OVERLAP {color:#000;padding:10px;}
</style>
<div ID="BACKGROUND">
<div ID="OVERLAP">
ABC
</div>
</div>

在這里，我創建了一個50（50 x 50像素）的背景（DIV）元素，然后在其中創建了另一個（DIV）元素，該元素專門用於與圖像重疊的文本，該圖像從10像素開始，通過DIV的padding語句定義為OVERLAP的ID。 如果在調整數字后圖像仍然不起作用，則可以編輯圖像以包含空白並相應調整尺寸（像素值）。