样式图片元素

时间:2016-02-26 17:21:35

标签: html css html5 css3

我正在学习自适应图像,我想在里面设计我的图片标签和图像。我试过使用.test1和.test2选择器,但它们都不起作用。那么有什么方法可以设计它吗?感谢。

UPD。例如,我想在图像上创建一个红色边框:https://jsfiddle.net/842L3f1x/

<picture class="test1">
  <source class="test2" srcset="img/photo-city@1x.jpg" media="(max-width: 700px)">
  <source srcset="img/photo-city@2x.jpg">
  <img src="img/photo-city@2x.jpg" alt="Photo city">
</picture>

1 个答案:

答案 0 :(得分:0)

你可以这样做:

<picture >
  <source srcset="https://placehold.it/350x150" media="(max-width: 700px)">
  <source srcset="https://placehold.it/750x450">
  <img  class="test1" src="https://placehold.it/750x450" alt="Photo city">
</picture>

它可以提供您需要的确切输出; img周围的红色边框,你不需要第二个CSS类。正如评论所说,使用“实验”功能要非常小心;您可能不支持某些浏览器的用户,以及该功能将来可能会发生变化并破坏您网站的功能。