background-position

来源：互联网发布：eve捏脸数据男编辑：程序博客网时间：2024/05/19 02:20
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.new_title { width:348px; height: 70px; border-radius: 6px; border:1px solid #dbdbdb; position: relative; background: url('./new_title_bg.gif') no-repeat; background-position:right -70px;}.new_title strong{ position: absolute; left:10px; top:5px; font-size: 14px; color:red}.new_title span { position: absolute; left:10px; top:20px; }</style>></head><body><!--background-position : x轴 y轴 x轴取值 left(图片左边线与div左边线贴在一起) right（图片右边线与div右边线贴在一起） center（图片x轴方向上居中） 像素（正的向右移动 负的向左移动）y轴取值 top（图片上边线与div上边线贴在一起）bottom（图片下边线与div下边线贴在一起） center（图片y轴方向上居中） 像素（正的向下移动 负的向上移动）案例1：background-position: right bottom;  默认情况是图片左上角与div左上角贴合，即background-position:left top; 或者background-position:0 0 x轴设置为right.图片右边线与div右边线贴合在一起y轴设置成bottom，图片下边线与div下边线贴合在一起即图片位于div右下方，图片右下角与div右下角贴合案例2：background-position:left -70px;默认情况是图片左上角与div左上角贴合，即background-position:left top; 或者background-position:0 0 x轴设置为left.x轴没有发生改变，还是图片左边线与div左边线贴合在一起y轴设置成-70px，图片顺着y轴方向 从0开始向上70px案例3：background-position:-163px 0;默认情况是图片左上角与div左上角贴合，即background-position:left top; 或者background-position:0 0 x轴设置为-163px.图片沿着x轴向左移动163pxy轴设置成0，及y轴不做变化雪碧图就是把一堆小图标放到一张大图上，需要哪个图标就利用background-position把它调出来比如本案例，如果把height缩小为70px，多出的雪碧图会被隐藏，div的背景就变成了雪碧图显示出来的那部分，可以通过控制background-postion来更换背景--><h2 class="new_title"><span style="white-space:pre"></span><strong>RECOMMDNE</strong><span style="white-space:pre"></span><span>精彩推荐</span></h2></body></html>
height:300px;background-position:right top;
height 70px ;background-position:right top;
height:70px; backgrounf-position:right -70px;
0 0