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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5本地存储之Web Storage应用介绍
Jan 06 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php中url函数介绍及使用示例
2014/02/13 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python装饰器语法糖
2019/01/02 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
详解Python模块化编程与装饰器
2021/01/16 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
最新自我评价范文
2013/11/16 职场文书
师范学院教师自荐书
2014/01/31 职场文书
公司总经理岗位职责
2014/03/15 职场文书
中学生打架检讨书
2014/10/13 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript