php - 使用 attr() 在不同的屏幕尺寸上响应式地显示不同的背景图像

Question

挑战在于，我可以从我的 CMS(为论证起见，假设是 WordPress)获得不同裁剪尺寸的背景图像，用于我页面上的横幅。这些裁剪尺寸是针对不同的屏幕尺寸(基于手机、平板电脑、笔记本电脑等)生成的。

我希望能够将所有不同裁剪尺寸的图像 URL 作为属性呈现到横幅 DOM 元素上，然后在外部 CSS 文档中使用媒体查询选择正确的图像进行显示。我想这样做的原因是我可以编写 PHP 以在不同页面上动态提供裁剪后的图像。

类似于 HTML:

<div style="background-image:url('/img/sm-background-image.jpg')"
   md-background-image="url('/img/md-background-image.jpg')"> ...

CSS:

@media (min-width: 768px) {
    .background-image-style {
        background-image: attr('md-background-image')!important; /* All screen sizes above the smallest and default size */
    }
}

因此，所有宽度为 768px 或更大的屏幕都将显示 md-background-image 属性中提供的图像，任何小于此尺寸的屏幕都将显示默认的 background-image在 style 属性中定义。

我可以看到 background-image 当前不支持 attr()，虽然 future 会有一定的范围，但我现在不能使用它。

Answer 1

我通过结合使用 CSS var() 方法和 style 属性达到了预期的效果。

我的 PHP 代码看起来像这样:

<div class="banner-image" style="
        --xl-background-image:url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>');
        --lg-background-image:url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>');
        --md-background-image:url('<?php echo $image['sizes']['md_header_banner_wide']; ?>');
        background-image:url('<?php echo $image['sizes']['sm_header_banner_wide']; ?>')">

呈现 HTML:

<div class="banner-image" style="
        --xl-background-image:url('/wp-content/uploads/2019/02/Products-Header-1489x600.jpg');
        --lg-background-image:url('/wp-content/uploads/2019/02/Products-Header-1400x564.jpg');
        --md-background-image:url('/wp-content/uploads/2019/02/Products-Header-1024x413.jpg');
        background-image:url('/wp-content/uploads/2019/02/Products-Header-768x309.jpg')">

因此，我可以使用以下 CSS 和媒体查询组合在我的外部 style.css 文件中根据客户端的屏幕尺寸显示不同的图像:

@media (min-width: 768px){
    .banner-image {
        background-image: var(--md-background-image)!important;
    }
}
@media (min-width: 992px){
    .banner-image {
        background-image: var(--lg-background-image)!important;
    }
}
@media (min-width: 1200px){
    .banner-image {
        background-image: var(--xl-background-image)!important;
    }
}

我已经使用开发人员工具在 Chrome 和 FireFox(在 Windows 上)和 Safari(在 Mac 上)上对此进行了检查，但我没有发现任何可比性问题。

替代方法:

或者，我在编写上述解决方案时意识到，一种风险较小的方法可能是将我的样式直接呈现到页面中。我想这只是区分这两种可能性的兼容性和/或编码标准问题。

<style type="text/css"> 
    @media (min-width: 768px){
        .banner-image {
            background-image: '<?php echo $image['sizes']['md_header_banner_wide']; ?>'!important;
        }
    }
    @media (min-width: 992px){
        .banner-image {
            background-image: url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>')!important;
        }
    }
    @media (min-width: 1200px){
        .banner-image {
            background-image: url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>')!important;
        }
    }
</style>