只有背景图像被翻转答案

【问题标题】：Only background image to be flipped只有背景图像被翻转
【发布时间】：2023-03-07 11:23:01
【问题描述】：

我有这个代码


<div id="page-wrapper" style="background-image: url(//localhost/xampp/moodle-rds-newest/kbeams/pluginfile.php/1/theme_space/loginbg/1624365793/Web%20edu%20V8-41.png); background-size: cover; background-attachment: fixed; background-repeat: no-repeat;" data-login="bg">

我只想翻转背景图片而不是整个网站。因为 CSS 采用了所有的 div 并实现了对每个子元素的翻转。有什么方法可以在特定 div 中仅包含背景图像的 css 并且仅翻转背景图像而不翻转整个页面？

【问题讨论】：

往哪个方向翻转？
我需要将背景图像水平镜像到与当前相反的方向。
这行得通吗？
-webkit-transform: scaleX(-1);变换：scaleX(-1);
您可以在其中添加另一个具有absolute 位置的 div 并为其提供背景，您可以在不翻转父 div 的情况下翻转它。

标签： html css background-image flip

【解决方案1】：

您可以使用选择器::before，给它一个背景，使其高度和宽度都变满，然后翻转它，这样就不会影响父div的内容。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        html, body {
            height: 100%;
        }
        body {
            color: white;
            margin: 0;
        }
        .content::before {
            content: '';
            background-image: url("some.url/background.jpg");
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: -1000;
            transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
        }
        </style>
    </head>
    <body>
        <div class="content">
            <span>Content goes here...</span>
        </div>
    </body>
</html>

注意：我使用属性left、right、top 和bottom 使元素的高度和宽度都是完整的。您也可以使用width 和height。

【讨论】：