ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 低调看体育直播 >> CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播 >> css背景图片的背景裁切、背景透明度、背景变换等效果运用

css背景图片的背景裁切、背景透明度、背景变换等效果运用(3/4)

来源:网络整理     时间:2016-06-20     关键词:

本篇文章主要介绍了" css背景图片的背景裁切、背景透明度、背景变换等效果运用",主要涉及到方面的内容,对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下: 这篇文章是99翻译Nicolas Gallagher 的CSS background image hacks 一文。大家都知道,目前有很多浏览器无法实现背景裁切...

 css背景图片的背景裁切、背景透明度、背景变换等效果运用

通过伪元素 利用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属性计算图片偏移只能从元素左侧跟上侧开始计算。这里可以给伪元素设置背景图片,之后把伪元素作为附加的背景层,即可实现从右侧跟下侧来计算背景偏移了

 css背景图片的背景裁切、背景透明度、背景变换等效果运用

这个技巧可以很容易的结合其他技巧使用。更多利用伪元素实现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及以下利用滤镜对伪元素设置透明度是无效的

相关图片

相关文章