首页 > 其他 > 详细

背景美化

时间:2019-06-09 22:11:52      阅读:95      评论:0      收藏:0      [点我收藏+]

(1)背景图:

使用【background-image】设置背景图片

使用【background-repeat】设置图片重复方式:

l  repeat:【默认值】从左到右从上到下重复

l  no-repeat:不重复

l  repeat-x:仅在x轴方向上重复

l  repeat-y:仅在y轴方向上重复

使用【background-position】设置图片在边框盒中的位置

l  预设值:left、right、top、bottom、center

l  数值:使用数值可实现从雪碧图(Sprite)中取得部分图像

使用【background-size】设置背景图尺寸

l  预设值:

l  数值:

使用【background-attachment】固定背景图:

l  scroll:【默认值】背景图跟随元素移动

l  fixed:背景图固定

 

(2)背景渐变

l  线性渐变:【background-image:linear-gradient(...)】

l  径向渐变(圆形渐变):【background-image:radial-gradient(...)】

 

4. 透明度和鼠标样式

透明度【opacity】和alpha通道

 

 

鼠标样式

 

5. 阴影

 

l  文字阴影【text-shadow】

l  盒子阴影【box-shadow】

背景美化

原文:https://www.cnblogs.com/gao7/p/10995059.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!