Chapter 8 背景图片

2017-01-05  本文已影响0人  Candy374

缩放背景图片

background-size: 100px 100px; /* 设置图片的尺寸*/
background-size: 100% auto; /* 浏览器会自动设置宽度，以保持不变的长宽比*/
background-size: 100% 100%; /* 图片将缩放，完全适应背景*/
background-size: contain; /* 迫使图片进行尺寸调整，以保持图片等长宽比， 图片会伸展， 以适应元素的高度或者宽度*/
background-size: cover; /* 为了适应元素， 图片会进行挤压或者拉伸*/

使用多个背景图片

📜 卷轴效果

background-image:  url(scrollTop.jpg),
                   url(scrollBottom.jpg),
                   url(scrollMiddle.jpg);
background-repeat: no-repeat,
                   no-repeat,
                   repeat-y;

background:  url(scrollTop.jpg) center top no-repeat,
             url(scrollBottom.jpg) center bottom no-repeat,
             url(scrollMiddle.jpg) center top repeat-y;

免费的图片

上一篇 下一篇

猜你喜欢

热点阅读