Question

是否有任何工作示例可以在Chrome中显示<ListView x:Name="lv1" Margin="0,60,0,0" IsItemClickEnabled="True" SelectionMode="None"> <ListView.ItemTemplate> <DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="150" MinWidth="0" /> <ColumnDefinition Width="1*" MinWidth="0" /> <ColumnDefinition Width="100" MinWidth="0" /> <ColumnDefinition Width="100" MinWidth="0" /> <ColumnDefinition Width="150" MinWidth="0" /> <ColumnDefinition Width="100" MinWidth="0" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" BorderThickness="0" Width="5" Background="Red" HorizontalAlignment="Left" Margin="-12,0,0,0" /> <TextBlock Grid.Column="0" Text="{Binding Day}" Foreground="{StaticResource TextBrushLight}"/> <Border Grid.Column="1" BorderBrush="Transparent"> <TextBlock Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=.ActualWidth}" Text="{Binding Department}" TextTrimming="CharacterEllipsis" Foreground="{StaticResource TextBrushLight}"/> </Border> <TextBlock Grid.Column="2" Text="{Binding Begin}" Foreground="{StaticResource TextBrushLight}"/> <TextBlock Grid.Column="3" Text="{Binding End}" Foreground="{StaticResource TextBrushLight}" /> <TextBlock Grid.Column="4" Text="{Binding Allocation}" Foreground="{StaticResource TextBrushLight}" /> <TextBlock Grid.Column="5" Text="{Binding Position}" Foreground="{ StaticResource TextBrushLight}" /> </Grid> </DataTemplate> </ListView.ItemTemplate> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> </Style> </ListView.ItemContainerStyle> </ListView>格式文件，在Firefox和IE / Edge中显示不同的.webp格式文件？

我现在使用此.jpg代码：

CSS

是否有#bgbox { background-imgage: url('../img/bg.webp'); }或类似的内容？

Answer 1

最简单的方法是使用<picture>元素并设置webp来源jpg后备。您可以拥有多个源，浏览器将尝试加载第一个兼容的源，或者如果不起作用则使用回退。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" />
</picture>

如果您需要设置背景，则需要采用不同的方法。您可以使用Modernizr检测浏览器是否支持webp并根据该类型应用不同的样式。

.image {
  background-size: cover;
  width: 100px;
  height: 100px;
}

.no-webp .image {
  background-image: url('https://www.gstatic.com/webp/gallery/4.jpg');
}

.webp .image {
  background-image: url('http://www.gstatic.com/webp/gallery/4.webp');
}

<script src="https://cdn.jsdelivr.net/modernizr/3.3.1/modernizr.min.js"></script>
<div class="image"></div>

Answer 2

您还可以使用图像设置，例如：

#bgbox {
   background-image: url('https://www.gstatic.com/webp/gallery/4.jpg');
   background-image: -webkit-image-set(url('http://www.gstatic.com/webp/gallery/4.webp')1x );
}

因此，不支持image-set或webp的浏览器将使用默认的背景图片。因此您不需要像modernizr

这样的任何javascript

如何在Firefox或IE / Edge中以Chrome和.jpg显示.webp？

2 个答案: