【前端积累】背景图像和背景替换

背景图像基础

如果希望网站有一个好看的背景，那么只需将图像作为背景应用于主体元素：

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来进行背景设置。

 

转载于:https://www.cnblogs.com/dream-to-pku/p/6649645.html