作者Lawegg (梁智翔)
看板Blog
标题Re: [Blogger] 该如何使用一张图片延展整个背景?
时间Sat May 15 22:46:25 2010
※ 引述《ollo (ollo)》之铭言：
: 如果我没误会你的意思的话
: 我猜你是不知道 picasa 的一个特性
: 就是同一张照片有可以有很多种尺寸
: (抱歉 因为要说明网址 所以没有缩)
: 譬如你本来可能看到这样:
: http://lh6.ggpht.com/_YNX2OJIu1kU/S-6NKyJwU6I/AAAAAAAABFA/-czDJZjG-RY/s800/DSC00163.jpg
: 那 /s800/ 就是关键字
: 想大一点 就改成 /s1024/ /s1280/ /s1440/ /s1600/
: 如果要原图大小 就这样:
: http://lh6.ggpht.com/_YNX2OJIu1kU/S-6NKyJwU6I/AAAAAAAABFA/-czDJZjG-RY/s0/DSC00163.jpg
: 当然可以小一点 就让你自己 try try 看有哪些 size
: 而且还可以变成正方形的缩图哩:
: http://lh6.ggpht.com/_YNX2OJIu1kU/S-6NKyJwU6I/AAAAAAAABFA/-czDJZjG-RY/s144-c/DSC00163.jpg
若是无法让图片以延展方式表现
让画面右测的滚轴上下移动时，图片可以成为真正的"背景"而不随滚轴上下而移动
也算是达到相同的效果。
ollo版友提供以下的方法:
关於卷动，可以参考
'background-attachment'
'background-position'
http://www.w3.org/TR/CSS2/colors.html
============================================
background-position:50% 0%
前面50%的数值代表图片左右的移动，随数字增加偏左，50%为中间值。
後面的0%为图片上下的移动，随数字增加而偏上，50%为中间值
随个人喜好作调整。
background-attachment:fixed;
这一行指令是让图片成为不随滚轴上下而移动的背景，也就是使图片静止。
以下为范例
body {
background:$bgcolor url(图片网址) no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 118.161.148.25