我们如何使用<picture>标签而不是“背景图像”？</picture>

Question

i want to use different images when opened in different devices. i have set a background image in the paragraph tag.

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

how can i use the below tag instead of the above "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

You can't achieve this with inline style. Use a stylesheet with media queries instead.

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

and

#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

try linking it with the <a> tag or the <link> tag like this:- <a href=""></a> or do the same with link