使用 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 */
    }
}

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

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

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）上进行了检查，但我没有发现任何可比性问题。

替代方法：

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

<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>

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

Responsively show different background images on different screen sizes using attr()

html

css

php

content-management-system

responsive-images