如何使用<picture>标签代替"background-image"？

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>或对link执行相同的操作