gpt4 book ai didi

jQuery 背景图像位置

转载 作者:太空宇宙 更新时间:2023-11-04 15:19:27 24 4
gpt4 key购买 nike

我对如何将背景图像从容器中移出感到困惑。

我有一个宽度为 960 的容器,居中。然后我在容器中有一个横幅,我需要在横幅后面的另一层上有一个图像,但有一个 margin-left: -100px,但是使用 CSS 它不起作用,因为背景图像不能从它们的容器中移出。我如何使用 jQuery 执行此操作,或者有人知道使用 CSS 执行此操作的语义正确的解决方法吗?

提前致谢。

编辑: http://i49.tinypic.com/s5wzmp.png这基本上就是我需要的样子,红色是背景图片,需要从横幅区域后面“突出”,这两个区域都在 960px 容器内。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body { background: #000;padding: 0; margin: 0; }
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; }
.image { background: url('image.png') no-repeat; height: 200px; width: 100%; }
.banner { background: #98cb4c; height: 180px; }
</style>
</head>

<body>
<div class="home-spot">
<div class="image">
<div class="banner">
</div>
</div>
</div>
</body>
</html>

最佳答案

我成功了!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body { background: #000;padding: 0; margin: 0; }
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; }
.image { background: url('image.png') no-repeat; height: 200px; width: 200px; position: absolute; margin-left: -100px; }
.banner { background: #98cb4c; height: 200px; width: 950px; margin-left: 100px; }
</style>
</head>

<body>
<div class="home-spot">
<div class="image">
<div class="banner">

</div>

</div>

</div>

</body>
</html>

关于jQuery 背景图像位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14754945/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com