如何解决只翻转背景图片
<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 并且只翻转背景图片而不翻转整个页面？
解决方法
你可以使用选择器::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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。