您现在的位置是：网站首页> 编程资料编程资料
css背景图片的背景裁切、背景透明度、背景变换等效果运用详解CSS3的opacity属性设置透明效果的用法CSS3中文字镂空、透明值、阴影效果设置示例小结css3实现的半透明遮罩lightbox效果源码纯CSS实现多级半透明效果菜单代码css+filter实现简单的图片透明效果CSS定义的PNG透明效果兼容各浏览器背景半透明效果CSS链接样式代码用CSS实现的图片透明度链接效果代码 CSS实现背景图片透明而文字不透明效果的两种方法
2021-09-07
1044人已围观
简介 大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果;那么这篇文章将详细介绍了这几种背景图片的处理方法,需要了解的朋友可以参考下
这篇文章是99翻译Nicolas Gallagher 的CSS background image hacks 一文。大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果。那么这篇文章将详细介绍了这几种背景图片的处理方法。
正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现，比如说CSS伪元素，他可以帮助我们模拟出这些CSS无法实现的效果，在开始了解怎么实现这些效果之前，我们一起来看一些DEMO效果，让我们最初一个概念。
伪元素技巧不需要添加额外的HTML标签就可以填补浏览器对一些CSS特性支持的真空，甚至可以模拟一些还未进入w3c草案的CSS特性，比如今天要说的背景变换、背景透明等等。
今天这篇文章中利用到的伪元素的大部分技巧均在早前的文章Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)有做过详细介绍，在这篇文章中已经详细讲解了怎样利用伪元素模拟CSS的多背景特性和CSS多边框的特效，文章的Multiple Backgrounds with CSS 2.1 和Multiple Borders with CSS 2.1 页也展现了一些利用伪元素来实现其他特性的基本原理。
模拟背景剪裁这种方法制作的背景剪裁，目前知道的就支持：Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+
利用css2.1即可模拟背景裁切效果。原理是把背景图片作为伪元素的背景，而不是作为原本容器的背景。下面第一个例子的效果是裁剪一部分背景，第二个效果可以裁剪css sprite，利用这个特性来制作文字旁边的小图片:
某种程度上，相比其他可用的方法使用伪元素是有优势的，伪元素结合了一些方法的优点，而某种程度上又可以规避他们的缺点
Google、facebook、 twitter 均使用空白dom元素来裁切他们复杂sprites，用来实现界面上链接旁的图标效果。
伪元素也可以用类似空白dom元素应用的方式来使用。同时，使用伪元素不需要依赖额外的html标签，而且不会过分依靠sprites。此方法的缺点是ie6，7浏览器不支持。利用此种方式，可以实现渐进增强，加强支持此特性浏览器页面的表现效果，而低版本浏览器仍采用空白元素的办法，同样可以完美的得到我们想要的效果。
这个例子展示了如何从一张排列紧密的雪碧图中裁切出你需要的图标。裁切尺寸为16*16。只需要创建一个ul列表，在需要生效的部分指定一个class即可
应用样式可以以各种方式展示这个列表，在此基础上我们利用伪元素，这里你完全可以把伪元素当作空白标签来使用 比如span标签。
:Before伪元素的尺寸正好可以匹配sprites的一个网格（即16*16）。同样你可以根据所裁切的部分，随意设置伪元素的尺寸
.actions a:before {
content:"";
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
background:url(sprite.png);
}
.save a:before {background-position:0 -16px;}
.delete a:before {background-position:0 -32px;}
.share a:before {background-position:0 -48px;}
.comment a:before {background-position:0 -64px;}
有的时候你可能不只在一种状态下设置背景图片，比如说悬浮状态下需要改变背景图片的等。其实，增加hover, focus, active, 与 “.saved”的情况是为了让列表在这些情况下也能正确渲染背景位置。
.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:-16px -16px;}
.saved a:before {background-position:-32px -16px;}
将来的替代方案
将来可以用另一种方式来实现。火狐浏览器的私有属性 -moz-image-rect可以裁切背景。但这个属性不被其他浏览器支持，而且可能会被属于css3背景属性草案中的一个标识所取代。据我所知就位图图像而言，现代浏览器对于这个属性没有任何稳定的支持。
模拟背景变换伪元素结合css3 transform的rotate,scale,skew属性，可以模拟背景变换。目前没有提案要求支持背景变换属性，所以伪元素技巧是唯一可以模拟此效果的方法。
旋转背景图片
刚刚讲解的背景图片裁切技术可以减少精灵图中的图片个数。我们也可以用css来实现图片的变形，而不需要使用图形软件处理。
实现上图的效果，其实很简单，其代码如下所示：
.accordion a:before {
content:"";
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
background:url(sprite.png) no-repeat 0 0;
}
.accordion.open a:before {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
若想对背景图片应用变换，而不会影响到其他元素，需要使用定位来调整背景图片的位置，详细的可以参考：Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)一文。
这里我们利用了伪元素，给伪元素使用图片，之后利用绝对定位跟z-index属性定位伪元素到内容层的下面即可。
背景图片倒影效果
有时候会对背景图有这样的需求，方法类似，不过这次使用的是transform：scale属性
通过伪元素 利用transform:scaleX(-1), transform:scaleY(-1),
transform:scale(-1,-1) 这三个属性你可以沿着x轴，y轴或者沿着中心轴做镜像对称。
下面的例子展示了伪元素模拟的背景变换是怎样应用在一个翻页链接上的。伪类显示了一张单独的图片，或者一张精灵图的一部分，之后进行变换。
注意rotation不能得到我们想要的效果，需要使用scale操作
.prev a:before,
.next a:before {
content:"";
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
background:url(sprite.png) no-repeat 0 0;
}
.next a:before {
float:right;
margin:0 0 0 5px;
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}
注：这个属性ie8以下不支持，即使你用ie的变换滤镜，伪元素上也不会生效
未来的解决方案
貌似css草案中没有相关的方案，你不需要依靠额外的标签，只需要伪元素就可以实现背景变换跟背景透视的效果。
模拟背景位置Css2.1的background-position属性计算图片偏移只能从元素左侧跟上侧开始计算。这里可以给伪元素设置背景图片，之后把伪元素作为附加的背景层，即可实现从右侧跟下侧来计算背景偏移了
这个技巧可以很容易的结合其他技巧使用。更多利用伪元素实现background-position的细节可以参考:Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有点烦的话，你可以看看由志哥翻译的文章使用css2.1实现多重背景、多重边框效果)一文。
在这个例子里伪元素放置到内容层的下面。给伪元素设置的背景图片的大小是500px × 300px，因此我们也要设置伪元素的宽高。
利用绝对定位，我们也可以调整伪元素的位置。
#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:-1;
bottom:10px;
right:10px;
width:500px;
height:300px;
background:url(image.jpg);
}
未来解决方案
这里的css草案CSS Backgrounds and Borders module 增强了background-position的效果，使其可以从盒子模型的任何一侧开始计算。到现在为止opera11是唯一可以稳定支持这个属性的浏览器。
模拟背景透明度改变伪元素的透明度跟直接操纵元素的透明度一样容易。
注：Ie8及以下利用滤镜对伪元素设置透明度是无效的
我们可以利用定位把伪元素定位在内容层下面，这样就不会影响内容了。之后利用坐标或者宽高调整伪元素的大小，使其适配内容。之后给伪元素设置背景图片，改变伪元素的透明度就可以了。
#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:url(image.jpg);
opacity:0.7;
}
这几种方法可以说将伪元素运用的是炉火纯青，当然他还是有一些限制的，比如说低版本浏览器的不兼容，就算是在现代浏览器中，伪元素有些效果也不被支持，比如说CSS3的animation属性在Webkit内核下就会有问题，但话又说回来，他的用处还是很多的，使用伪元素来制作阴影效果，如23 Box-shadow Effects ，使用伪来制作对话气泡效果，如Pure CSS speech bubbles 。当然还有很多其他的效果。这里就不一一说了。
最后希望这篇译文对大家有所帮助，特别是帮助大有增长思维。
相关内容
- 表单button的outline在firefox浏览器下的问题css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- input 按钮在IE下显现不一致的兼容问题input 按钮显示差异的解决方法CSS让网页提交input按钮与众不同类型File的Input按钮功能研究关于如何去掉submit按钮背景阴影的解决方法input 背景图片移出 bug解决适合绝大多数电脑用户的老牌实用软件 驱动精灵 2011V5.5.513.2020 绿色input 按钮背景在IE6 IE7中不显示的解决方法
- button在IE6/7下的黑边去除方案css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 移动Web—CSS为Retina屏幕替换更高质量的图片css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码分享CSS代码写法优化方案网页头部css代码优化实例CSS代码优化7个准则智能化CSS检测法，好优化拒绝冗杂代码CSS代码是否合理？是否优化？-CSS教程-网页制作-网页教学网详解CSS代码重构与优化之路(经典)
- image-set实现Retina屏幕下图片显示详细介绍详解如何使用image-set适配移动端高清屏图片
- 今天学到的CSS最新技术(与图片背景相关)css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- css盒模型和块级、行内元素深入理解CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- csshover.htc在IE7下使用:active伪类无效解决方法a标签的四个css伪类(link、visited、hover、active)样式理解链接伪类（:hover）CSS背景图片有闪动BUG的解决方法CSS a:hover伪类在IE6下的问题CSS3实现伪类hover离开时平滑过渡效果示例
- SELECT在浏览器中相关Bug整理浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
