如何只翻转背景图片而内容不变

最新推荐文章于 2025-04-18 13:13:37 发布

五当家

最新推荐文章于 2025-04-18 13:13:37 发布

阅读量4.1k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/CHENWEI199908/article/details/118926335

版权

自己只想翻转背景图片，不想翻转里面内容，直接在元素里面用transform会导致内容也翻转。。。。。。解决办法：
废话不多说直接上实例

html内容，要翻转背景的盒子

<div class="bottom"></div>

css内容，盒子大小自己设置，我这里不想打了

.bottom::before{
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: -1;
                background: url(../img/true.png) no-repeat top center;
                background-size: 100% 100%;
                transform:scaleY(-1);
            }
 .bottom{
                position: relative;
            }