我们如何使用 <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

尝试 link 使用 <a> 标签或 <link> 标签，如下所示：- <a href=""></a> 或对 link

做同样的事情

Answer 2

您无法使用内联样式实现此目的。请改用带有媒体查询的样式表。

<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");
    }
}

我们如何使用 <picture> 标签而不是 "background-image"？

How can we use <picture> tag instead of "background-image"?

html

css

tags

xhtml

background-image