[英]How can we use <picture> tag instead of “background-image”?
我想在不同设备中打开时使用不同的图像。 我在段落标签中设置了背景图像。
<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>
内联样式无法实现这一点。 改为使用带有媒体查询的样式表。
<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");
}
}
尝试将其与<a>
标签或<link>
标签链接,如下所示:- <a href=""></a>
或对链接执行相同操作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.