css情况照片的情况裁剪、情况全透明度、情况转

2021-01-20 12:18 jianzhan

这篇文章内容是99汉语翻译Nicolas Gallagher 的CSS background image hacks 1文。大伙儿都了解，现阶段有许多访问器没法完成情况裁剪、情况全透明度、情况转换和繁杂情况精准定位等实际效果。那末这篇文章内容将详尽详细介绍了这几种情况照片的解决方式。

正如前面所说，仅仅借助CSS现有的特性，大家没法完成情况裁剪、情况全透明度、情况转换和繁杂情况精准定位等实际效果.以便完成这些实际效果，大家必须依靠CSS的别的方式来完成，例如说CSS伪元素，他能够协助大家仿真模拟出这些CSS没法完成的实际效果，在刚开始掌握如何完成这些实际效果以前，大家1起看来1些DEMO实际效果，让大家最开始1个定义。

伪元素技能不必须加上附加的HTML标识便可以弥补访问器对1些CSS特点适用的真空泵，乃至能够仿真模拟1些还未进到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 页也呈现了1些运用伪元向来完成别的特点的基础基本原理。

仿真模拟情况裁剪

这类方式制做的情况裁剪，现阶段了解的就适用：Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

运用css2.1便可仿真模拟情况裁剪实际效果。基本原理是把情况照片做为伪元素的情况，而并不是做为本来器皿的情况。下面第1个事例的实际效果是剪裁1一部分情况，第2个实际效果能够剪裁css sprite，运用这个特点来制做文本周围的小照片:

某种水平上，相比别的能用的方式应用伪元素是有优点的，伪元素融合了1些方式的优势，而某种水平上又能够避开她们的缺陷

Google、facebook、 twitter 均应用空白dom元向来裁剪她们繁杂sprites，用来完成页面上连接旁的标志实际效果。

伪元素还可以用相近空白dom元素运用的方法来应用。另外，应用伪元素不必须依靠附加的html标识，并且不容易太过借助sprites。此方式的缺陷是ie6，7访问器不适用。运用此种方法，能够完成渐进提高，提升适用此特点访问器网页页面的主要表现实际效果，而低版本号访问器仍选用空白元素的方法，一样能够完善的获得大家要想的实际效果。

这个事例展现了怎样从1张排序密不可分的雪碧图中裁剪出你必须的标志。裁剪规格为16*16。只必须建立1个ul目录，在必须起效的一部分特定1个class便可

拷贝编码
编码以下:

<ul class="actions" >
<li class="save" ><a href="#" >Save</a></li>
<li class="delete" ><a href="#" >Delete</a></li>
<li class="share" ><a href="#" >Share</a></li>
<li class="comment" ><a href="#" >Comment</a></li>
</ul>

运用款式能够以各种各样方法展现这个目录，在此基本上大家运用伪元素，这里你彻底能够把伪元素作为空白标识来应用 例如span标识。

:Before伪元素的规格恰好能够配对sprites的1个网格（即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 ⑴6px;}
.delete a:before {background-position:0 ⑶2px;}
.share a:before {background-position:0 ⑷8px;}
.comment a:before {background-position:0 ⑹4px;}

有的情况下你将会不只在1种情况下设定情况照片，例如说飘浮情况下必须更改情况照片的等。实际上，提升hover, focus, active, 与 “.saved”的状况是以便让目录在这些状况下也能正确3D渲染情况部位。

拷贝编码
编码以下:

.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:⑴6px ⑴6px;}
.saved a:before {background-position:⑶2px ⑴6px;}

未来的取代计划方案

未来能够用另外一种方法来完成。火狐访问器的独享特性 -moz-image-rect能够裁剪情况。但这个特性不被别的访问器适用，并且将会会被属于css3情况特性草案中的1个标志所替代。据我所知就位图图象而言，当代访问器针对这个特性沒有任何平稳的适用。

仿真模拟情况转换

伪元素融合css3 transform的rotate,scale,skew特性，能够仿真模拟情况转换。现阶段沒有提议规定适用情况转换特性，因此伪元素技能是唯1能够仿真模拟此实际效果的方式。

转动情况照片

不久解读的情况照片裁剪技术性能够降低小精灵图中的照片个数。大家还可以用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完成多种情况、多种边框实际效果)1文。

这里大家运用了伪元素，给伪元素应用照片，以后运用肯定精准定位跟z-index特性精准定位伪元素到內容层的下面便可。

情况照片倒映实际效果

有时会对情况图有这样的要求，方式相近，但是这次应用的是transform：scale特性

根据伪元素 运用transform:scaleX(⑴), transform:scaleY(⑴),
transform:scale(⑴,⑴) 这3个特性你能够沿着x轴，y轴或沿着管理中心轴做镜像系统对称性。

下面的事例展现了伪元素仿真模拟的情况转换是如何运用在1个换页连接上的。伪类显示信息了1张独立的照片，或1张小精灵图的1一部分，以后开展转换。

留意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(⑴);
-moz-transform:scaleX(⑴);
-ms-transform:scaleX(⑴);
-o-transform:scaleX(⑴);
transform:scaleX(⑴);
}

注：这个特性ie8下列不适用，即便你用ie的转换滤镜，伪元素上也不容易起效

将来的处理计划方案

貌似css草案中沒有有关的计划方案，你不必须借助附加的标识，只必须伪元素便可以完成情况转换跟情况透視的实际效果。

仿真模拟情况部位

Css2.1的background-position特性测算照片偏位只能从元素左边跟上侧刚开始测算。这里能够给伪元素设定情况照片，以后把伪元素做为额外的情况层，便可完成从右边跟下侧来测算情况偏位了

这个技能能够很非常容易的融合别的技能应用。更多运用伪元素完成background-position的细节能够参照:Multiple Backgrounds and Borders with CSS 2.1 (假如你看英文有点烦的话，你能够看看由志哥汉语翻译的文章内容应用css2.1完成多种情况、多种边框实际效果)1文。

在这个事例里伪元素置放到內容层的下面。给伪元素设定的情况照片的尺寸是500px × 300px，因而大家也要设定伪元素的宽高。

运用肯定精准定位，大家还可以调剂伪元素的部位。

拷贝编码
编码以下:

#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:⑴;
bottom:10px;
right:10px;
width:500px;
height:300px;
background:url(image.jpg);
}

将来处理计划方案

这里的css草案CSS Backgrounds and Borders module  提高了background-position的实际效果，使其能够从盒子实体模型的任何1侧刚开始测算。到如今为止opera11是唯1能够平稳适用这个特性的访问器。

仿真模拟情况全透明度

更改伪元素的全透明度跟立即控制元素的全透明度1样非常容易。

注：Ie8及下列运用滤镜对伪元素设定全透明度是失效的

大家能够运用精准定位把伪元素精准定位在內容层下面，这样就不容易危害內容了。以后运用座标或宽高调剂伪元素的尺寸，使其兼容內容。以后给伪元素设定情况照片，更改伪元素的全透明度便可以了。

拷贝编码
编码以下:

#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:⑴;
top:0;
bottom:0;
left:0;
right:0;
background:url(image.jpg);
opacity:0.7;
}

这几种方式能够说将伪元素应用的是驾轻就熟，自然他還是有1些限定的，例如说低版本号访问器的兼容问题，即使是在当代访问器中，伪元素一些实际效果也不被适用，例如说CSS3的animation特性在Webkit核心下就会有难题，但话又说回家，他的用途還是许多的，应用伪元向来制做黑影实际效果，如23 Box-shadow Effects ，应用伪来制做会话气泡实际效果，如Pure CSS speech bubbles 。自然也有许多别的的实际效果。这里就不11说了。

最终期待这篇译文对大伙儿有一定的协助，非常是协助大有提高逻辑思维。

为您推荐