免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: background-size [打印本页]
作者: qianhong    时间: 2020-7-30 20:54     标题: background-size

background-position: center
background-size:auto
保持原图大小


background-position: right bottom
background-size:30%
按背景尺寸百分比放大或缩小，
第一个值是宽度，第二个值为高度。
如果只给出一个值，第二个值自动变化。


background-position: center top
background-size:cover
保持原比例放大填满背景


background-position: center top
background-size:contain
保持原比例放大或压缩到背景尺寸


background-position: center top
background-size:600px
第一个值是宽度，第二个值设置为高度。
  只给出一个值，第二个值按原比例自动变化。

https://www.w3schools.com/cssref/css3_pr_background-size.asp

https://www.runoob.com/cssref/css3-pr-background-size.html


作者: qianhong    时间: 2020-7-31 07:41

background-position: center
background-size:100% 100%
不保持原图宽高比例，图片拉伸到填满背景


作者: qianhong    时间: 2020-9-25 15:26

恭祝梁維耀教授


200710862044.gif


rainbow 敬賀

保持原背景圖比例，放大至800x600。


  1. <center><div style="width:800px; height:600px">
  2. <section style="background-image:url('https://i.servimg.com/u/f31/17/91/32/29/700x5210.jpg');background-color:#ffffff; background-repeat:no-repeat;background-position: center top; background-size:cover; width:800px; height:600px; border-radius:30px">
  3. <section style="padding-left:150px; padding-top:150px" align=center>
  4. <span style="FONT: bold 50px/120% Microsoft YaHei; COLOR: #ff3333; text-shadow: 1px 1px 1px #003399; letter-spacing:0px">恭祝梁維耀教授</span><br><br><br>
  5. <img src="https://i.servimg.com/u/f31/17/91/32/29/20071010.gif" alt="200710862044.gif"><br><br><br>
  6. <span style="FONT: bold 30px/140% kaiti; COLOR: #ff3333">rainbow 敬賀</span>
  7. </section>
  8. </section>
  9. </div></center><br><br>
复制代码
作者: qianhong    时间: 2020-9-25 15:49

恭祝梁維耀教授

200710862044.gif

rainbow 敬賀

保持原背景圖比例，縮小至600x450。


  1. <center><div style="width:600px; height:450px">
  2. <section style="background-image:url('https://i.servimg.com/u/f31/17/91/32/29/700x5210.jpg');background-color:#ffffff; background-repeat:no-repeat;background-position: center top; background-size:cover; width:600px; height:450px; border-radius:30px">
  3. <section style="padding-left:120px; padding-top:90px" align=center>
  4. <span style="FONT: bold 50px/120% Microsoft YaHei; COLOR: #ff3333; text-shadow: 1px 1px 1px #003399; letter-spacing:0px">恭祝梁維耀教授</span><br><br>
  5. <img src="https://i.servimg.com/u/f31/17/91/32/29/20071010.gif" alt="200710862044.gif"><br><br>
  6. <span style="FONT: bold 30px/140% kaiti; COLOR: #ff3333">rainbow 敬賀</span>
  7. </section>
  8. </section>
  9. </div></center><br><br>
复制代码
作者: qianhong    时间: 2020-9-25 15:57

恭祝梁維耀教授

200710862044.gif

rainbow 敬賀

原背景圖尺寸700x525


  1. <center><div style="width:700px; height:525px">
  2. <section style="background-image:url('https://i.servimg.com/u/f31/17/91/32/29/700x5210.jpg');background-color:#ffffff; background-repeat:no-repeat;width:700px;height:525px;border-radius:30px">
  3. <section style="padding-left:150px; padding-top:120px" align=center>
  4. <span style="FONT: bold 50px/120% Microsoft YaHei; COLOR: #ff3333; text-shadow: 1px 1px 1px #003399; letter-spacing:0px">恭祝梁維耀教授</span><br><br>
  5. <img src="https://i.servimg.com/u/f31/17/91/32/29/20071010.gif" alt="200710862044.gif"><br><br>
  6. <span style="FONT: bold 30px/140% kaiti; COLOR: #ff3333">rainbow 敬賀</span>
  7. </section>
  8. </section>
  9. </div></center><br><br>
复制代码
作者: qianhong    时间: 2020-9-25 16:32

恭祝梁維耀教授

200710862044.gif



rainbow 敬賀

不保持原背景圖比例，放大至800x730。


  1. <center><div style="width:800px; height:730px">
  2. <section style="background-image:url('https://i.servimg.com/u/f31/17/91/32/29/700x5210.jpg');background-color:#ffffff; background-repeat:no-repeat;background-position: center; background-size:100% 100%; width:730px; height:750px; border-radius:30px">
  3. <section style="padding-left:150px; padding-top:120px" align=center>
  4. <span style="FONT: bold 50px/120% Microsoft YaHei; COLOR: #ff3333; text-shadow: 1px 1px 1px #003399; letter-spacing:0px">恭祝梁維耀教授</span><br><br>
  5. <img src="https://i.servimg.com/u/f31/17/91/32/29/20071010.gif" alt="200710862044.gif"><br><br>
  6. <img src="http://dl8.glitter-graphics.net/pub/588/588818bxvjhr877l.gif" width=200><br><br>
  7. <span style="FONT: bold 30px/140% kaiti; COLOR: #ff3333">rainbow 敬賀</span>
  8. </section>
  9. </section>
  10. </div></center><br><br>
复制代码
作者: qianhong    时间: 2020-12-27 10:50

background-position: 0% center;
background-repeat: no-repeat;
padding: 20px; box-sizing: border-box;
background-size:100% 100%; 
width:700px; height:400px;
border-radius:60px;
原图：


作者: qianhong    时间: 2022-5-10 17:32

痛失良友


作者: qianhong    时间: 2022-5-10 17:36

痛失良友




作者: qianhong    时间: 2022-7-30 13:04

恭祝梁维真学姐九十华诞
rainbow 敬賀






欢迎光临 倩虹園地 (http://qianhong.joinbbs.net/) Powered by Discuz! 7.2