Как мы можем использовать тег <picture>вместо "background-image"?

Question

Я хочу использовать разные изображения при открытии на разных устройствах. Я установил фоновое изображение в теге абзаца.

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

как я могу использовать тег ниже вместо указанного выше "background-image".

<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> или сделайте то же самое со ссылкой