CSS3 transforms应用于背景图像的解决方法


Posted in HTML / CSS onApril 16, 2019

CSS transformations虽然很酷,但还没有应用于背景图像。这篇文章提供了一个很好的解决方法,当您确实想要旋转背景图像时,或者在容器元素旋转时保持背景图像不变。

使用css3转换属性可以缩放、倾斜和旋转任何元素。它在所有没有厂商前缀的现代浏览器中都得到支持。(我已经添加了-webkit-以防您希望支持一些较旧的浏览器。)

#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

很棒的东西。但是,这会旋转整个元素-其内容、边框和背景图像。如果你只想旋转背景图像怎么办?或者如果希望在元素旋转时背景保持不变

目前,还没有W3C对背景图像转换的建议。这将是非常有用的,所以我怀疑最终会出现一个,但这对今天想要使用类似效果的开发人员没有帮助。

幸运的是,有一个解决方案。本质上,这是一种将背景图像应用于伪元素之前或之后的黑客行为,而不是父容器。然后可以独立地转换伪元素。

仅转换背景

容器元素可以应用任何样式,但必须将其设置为position:relative,因为我们的伪元素将定位在该元素中。您还应该设置溢出:隐藏,除非您愿意让背景溢出容器之外。

#myelement {
position: relative;
overflow: hidden;
}

我们现在可以创建一个具有转换背景的绝对定位的伪元素。z-index设置为-1以确保它出现在容器内容的下面。

#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

注意,您可能需要调整伪元素的宽度、高度和位置。例如,如果使用的是重复图像,则旋转区域必须大于其容器才能完全覆盖背景:

CSS3 transforms应用于背景图像的解决方法

在转换元素上固定背景

修复已转换元素的背景。父容器上的所有转换都应用于伪元素。因此,我们需要撤消该转换,例如,如果容器旋转30度,则必须将背景旋转-30度以返回到固定位置:

#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);

同样,您需要调整大小和位置,以确保背景充分覆盖父容器。

效果在所有主要浏览器中都有效,在Edge和Internet Explorer中都可以恢复到版本9。IE8不会显示任何转换,但仍会显示背景。

总结

以上所述是小编给大家介绍的CSS3 transforms应用于背景图像的解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 #HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 #HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 #HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 #HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 #HTML / CSS
You might like
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
JS实现轮播图效果
2020/01/11 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
函授本科毕业自我鉴定
2013/10/09 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
会计助理岗位职责
2014/02/17 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2015年共青团工作总结
2015/05/15 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android