我們如何使用<picture>標簽而不是“背景圖像”？</picture>

Question

我想在不同設備中打開時使用不同的圖像。 我在段落標簽中設置了背景圖像。

<p style="background-image: url('outdoor.jpg"); color: #fff; font-size: 20px"> blablablabla</p>

我如何使用下面的標簽而不是上面的“背景圖像”。

<picture>
    <source media="(min-width: 950px)" srcset="outdoor.jpg">
    <source media="(min-width: 765px)" srcset="wall.jpg">
    <img src="plants.jpg" style="width:auto;">
</picture>

Answer 1

內聯樣式無法實現這一點。 改為使用帶有媒體查詢的樣式表。

<p id="myParagraph">blablablabla</p>

和

#myParagraph {
    background-image: url('plants.jpg");
    color: #fff;
    font-size: 20px;
}

@media (min-width: 765px) {
    #myParagraph {
        background-image: url('wall.jpg");
    }
}

@media (min-width: 950px) {
    #myParagraph {
        background-image: url('outdoor.jpg");
    }
}

Answer 2

嘗試將其與<a>標簽或<link>標簽鏈接，如下所示：- <a href=""></a>或對鏈接執行相同操作