【前端积累】背景图像和背景替换
背景图像基础
如果希望网站有一个好看的背景,那么只需将图像作为背景应用于主体元素:
1 body{ 2 background:url(../position-pic.png); 3 }
浏览器默认的行为是水平和垂直地重复显示这个图像,让图像平铺在整个页面上。可以选择背景图像是垂直平铺、水平拼购还是根本不平铺。
目前渐变非常流行,如果希望构建出垂直渐变,我们可以创建一个很高很窄的渐变图像,然后将这个图像应用于页面的主体并且让他水平平铺。
body{ background:#03C url(../float-clear.png) repeat-x; }
还可以设置背景图像的位置,假如希望在站点的每个标题上添加一个符号:
1 h1{ 2 padding-left:50px; 3 background:url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/add.png) no-repeat left center;} 4 5 <h1>Topic Test</h1>
如果希望使用百分百而不是关键字实现垂直居中的话,可以将垂直位置设置为50%,这样会将符号图像垂直居中。
1 h1{ 2 padding-left:50px; background:url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/add.png) no-repeat 0 50%;}
不要将像素等单位与关键字混合使用。 |
圆角框
固定宽度的圆角框:
1 .box{ 2 width:418px; 3 background:#effce7 url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/card_gray_bg.png) no-repeat left bottom;} 4 .box h2{ 5 background:url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/card_bg.png) no-repeat left top;} 6 <!--不希望内容碰到框的边界,所以在div元素上添加一些填充--> 7 .box h2{ 8 padding:10px 20px 0 20px;} 9 .box p{ 10 padding:0 20px 10px 20px;} 11 12 <div class="box"> 13 <h2>Headline</h2> 14 <p>Content</p>
不在框上设置背景颜色,而是设置一个重复显示的背景图像,还需要底部曲线图像应用到另一个元素上,因为没有给框设置高度,所以会随着文本尺寸的增加进行垂直扩展。
1 .box{ 2 width:418px; 3 background:#effce7 url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/card_gray_bg.png) repeat-y;} 4 .box h2{ 5 background:url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/card_bg.png) no-repeat left top; 6 padding-top:20px;} 8 .box .last{ 9 background:url(../../Intelworkspace/vcweixin/WebRoot/images/hqlx/card_gray_bg.png) no-repeat left bottom; 10 padding-bottom:20px;} 11 .box h2,.box p{ 12 padding-left:20px; 13 padding-right:20px;} 14 15 <div class="box"> 16 <h2>Headline</h2> 17 <p class="last">Content</p> 18 </div>
如果加大字号的话,上面的方法不会水平扩展,我们可以设置top-right top-left bottom-left bottom-right来进行背景设置。