文档章节

css学习-背景图像效果

bosscheng
 bosscheng
发布于 2015/04/14 16:16
字数 178
阅读 14
收藏 0
css


repeat-x repeat-y  no-repeat

对于像素背景位置  

圆角框

思路:使用两张图  上一张,下一张。

滑动门技术

使用四张图片 

山顶角



border-radius

border-image 

投影

最简单的原理:将一个大的投影图像应用于容器div的背景,然后使用负的外边距偏移这个图像,从而显示出投影。

box-shadow 投影 

不透明度

opacity

filter:alpha(opacity=)

不透明的问题:除了对背景生效之外,应用它的元素内容也会继承他

RGBa

png透明度

对于ie6的支持png透明度解决方案,使用AlphaImageLoader过滤器。

filter:progid:DXImageTransform.Miscrosoft.AlphaImageLoader(src="",sizingMethod='')

css 视差效果

视差滚动

© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 78
博文 299
码字总数 91232
作品 0
南京
前端工程师
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代,构建多屏体验也不是听说的那么难。 但是这也增加了学习CSS的难度?不知道...

woIwoI
2014/11/28
0
0
CSS3.0新增属性

背景图片设定 background 默认图片重复 css允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 background-size规定背景图片的尺寸 background-size:cover 优先宽释放 高度根据宽度...

RanoB
2016/12/27
7
0
CSS 图像透明/不透明

使用CSS很容易创建透明的图像。 注意:CSS Opacity属性是W3C的CSS3建议的一部分。 更多实例 创建透明图像 - 悬停效果 创建一个具有文本的拥有背景图像的透明框 实例1 - 创建一个透明图像 CS...

wybo521
2016/01/21
6
0
15种CSS混合模式让图片产生令人惊艳的效果

如果你曾经广泛地使用过图片编辑应用软件(例如,Adobe Photoshop,Pixelmator,GIMP等),那么你可能对混合模式比较熟悉。如同名称中所暗示的,混合模式是指将上层的图像融入下层图像时采用...

欲思
2014/07/11
8.3K
1
CSS 图像拼合技术

图像拼合 图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量,并节省带宽。 图像拼合 - 简单实例 与其使...

wybo521
2016/01/21
8
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular 解决其他电脑不能访问的问题。

ng serve --host 0.0.0.0 --disable-host-check

miaojiangmin
今天
1
0
优酷视频文件怎么转换格式

  以前在优酷上下载视频都只是在手机上观看,但随着科技的发展,对于视频的要求也逐渐增多,不再只是观看视频那么简单,在精彩的部分还会将其单独分割出来,然后进行视频剪辑,可以做出我们...

萤火的萤火
今天
0
0
数据结构:散列

在一个数据结构中查找key元素,用顺序查找、二分查找都需要经过一系列关键之比较才能查找到结果,平均查找长度与数据量有关,元素越多比较次数就越多。 如果根据元素的关键字就能知道元素的存...

京一
今天
1
0
Apache RocketMQ 正式开源分布式事务消息

近日,Apache RocketMQ 社区正式发布4.3版本。此次发布不仅包括提升性能,减少内存使用等原有特性增强,还修复了部分社区提出的若干问题,更重要的是该版本开源了社区最为关心的分布式事务消...

阿里云云栖社区
今天
32
0
使用JavaScript和MQTT开发物联网应用

如果说Java和C#哪个是最好的开发语言,无疑会挑起程序员之间的相互怒怼,那如果说JavaScript是动态性最好的语言,相信大家都不会有太大的争议。随着越来越多的硬件平台和开发板开始支持JavaS...

少年不搬砖老大徒伤悲
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部