[英]How to position a div with background image within a div with background image?
Still new to Javascript and JQuery. 仍然是Javascript和JQuery的新手。 I have a
div
with a div
. 我有一个
div
和div
。 I set a background image in the outer div
and I want to set another image in the inner div
. 我在外部
div
设置了背景图片,并在内部div
设置了另一图片。 I also want to set the inner div
at top left 10 10 from the outer div
. 我还想将内部
div
设置为外部div
左上角10 10。
I am using the following code ( lc
is outter, slc1
is inner): 我正在使用以下代码(
lc
是slc1
, slc1
是内部):
$(myPage.hash('lc')).css("background-image", "url(images/leftcolumn640.jpg)");
$(myPage.hash('slc1')).width("200");
$(myPage.hash('slc1')).height("200");
$(myPage.hash('slc1')).position({
my: "left top",
at: "left top",
offset: "10 10",
of: myPage.hash('lc'),
collision: "fit"
});
$(myPage.hash('slc1')).css("background-image", "url(images/Square_200w_200h.png)");
Both the inner and outer image are diplayed, but the inner image is not at 10 10 of the outer image. 内部图像和外部图像都被显示,但是内部图像不在外部图像的10 10处。 What am I doing wrong?
我究竟做错了什么? How can I solve this?
我该如何解决? Thanks.
谢谢。
Try the following: 请尝试以下操作:
$(myPage.hash('slc1')).css({
width:200,
height:200,
position:"relative",
top:10,
left:10,
backgroundImage:"url(images/Square_200w_200h.png)"
});
Alternatively, you could try using margins instead of positions. 另外,您可以尝试使用边距代替位置。
If you're new to this why not start with the basics before you move onto a framework like JQuery? 如果您是新手,在进入JQuery之类的框架之前,为什么不从基础开始?
In HTML* and CSS: 在HTML *和CSS中:
<style type="text/css">
.outer {
position: absolute;
top: 100;
left: 100;
background-image: url('path/to/image.jpg');
}
.inner {
position: relative;
top: 10;
left: 10;
background-image: url('path/to/image1.jpg');
}
</style>
<div class="outer"><div class="inner"></div></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.