Question

请问，html+css如何只显示图片中的一部分内容？

现在，很多网站的网页设计都喜欢将图片合并为一幅图片（如下图）。求html+css代码，实现只显示“同程无线”。感觉以下这种方式实现的不好，因为对位置敏感，容易错位。 .TCLogo { width:146px; height:36px; background-image:url(17u.cn.png); background-attachment:fixed; background-position:-82px -137px; background-repeat:no-repeat; }求绝大部分网站的最好的实现方式。

（图片来源：17u）

Answer 1

用background控制位置background:url("imgurl") no-repeat XXpx XXpx，后面的就是控制距离的

Answer 2

width:146px;height:36px;background:url("../img/17u.cn.png") no-repeat -90px -144px;

Answer 3

你给的这个例子没有任何问题啊，就是按照你的要求只显示图片中的一部分啊

追问

我想知道大部分网站都是怎么做的？

追答

大部分网站就是这么做的。但是LOGO一般会是一张独立的图片，不会合并到一起。

追问

谢谢！
这样做，图片就会左对齐，但是居中对齐会出现问题。如何使图片居中对齐不会出现问题？

追答

这个技术是使用背景图绝对定位，与相对位置是冲突的，

// 绝对定位与相对定位是冲突的，只能生效一个。。
background-position:-82px -137px; // 绝对定位
background-position:top right; // 相对定位