Question

css中如何指定文字在图片中的位置?

.text {backgroud-image:url(pic.jpg)

<div class="text">字</div>
我想"字"在图片中指定位置显示,应该怎么做?

Answer 1

有很多种方法可以实现。

随便写几种。
------------------------------
CSS部分：
.text{background-image;url(pic.jpg);
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
overflow:hidden; /*超出部分隐藏*/}
.text span{
margin-top:xx px;/*离上边距离*/
margin-left:xx px;/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
------------------------------
CSS部分：
.text{background-image;url(pic.jpg);
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
position:relative;; /*相对定位*/}
.text span{
position:absolute;/*绝对定位*/
top:xx px;/*离上边距离*/
left:xx px;/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
--------------------------------------
CSS部分：
.text{background-image;url(pic.jpg);
width: xx px /*注意，这里是你自己定义的宽减去padding-left的值*/
height: xx px /*注意，这里是你你自己定义的高减去padding-top的值*/
padding-top:xx px; /*离上边距离*/
padding-left:xx px; /*离左边距离*/
}

html部分：
<div class="text">字</div>

lz自己选吧。

Answer 2

两种方法：

方法一：移动文字文字
padding-top:10px; 文字向下移动10个像素
padding-left:20px; 文字向右移动20个像素

方法二：移动背景图的位置
background:url(pic.jpg) no-repeat -20px -10px; //背景图不重复且向左移动20个像素向上移动10个像素

Answer 3

设定text样式的padding属性。如: .text{backgroud-image:url(pic.jpg); padding:10px 0px 0px 20px;}padding的数值顺序是上右下左排的。你试试改数值，直到你把文字设置到你需要的位置就可以了。

Answer 4

1、图片作为背景图
2、图文分别放入div，两者相对定位

Answer 5

padding-top:

padding-left:

分别是距离上面和左边多少距离