0

我在网页上使用了背景图片并在 css 中使用了此代码，这使得在调整浏览器大小时可以很好地调整大小。

body{   
    background: url("images/back.jpg") no-repeat  ;
    background-size: cover;
}

我需要在特定位置的背景图像顶部放置一些其他图像（桌子上的花瓶）。但是当我这样做时，背景会被调整大小，但是当浏览器被调整大小时，花瓶图像保持在相同的位置和相同的大小为如下图第二张所示。

看这两张图片中的花瓶

全尺寸浏览器

调整大小的浏览器

我怎样才能让花瓶图像也像背景一样调整大小

4

3 回答 3

1

我最近在创建一个隐藏对象游戏时遇到了完全相同的问题，该游戏需要将图像放置在背景图像之上以保持其位置，而不管浏览器尺寸如何。

这是我所做的：

您可以包含背景图像的模板版本作为实际版本（因此它不可见，但仍会占用 DOM 中的空间，<img>并visibility:hidden以此为基础确定大小（和背景图像大小）。

HTML：

<div class="image-container">
    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
    <div class="item"></div>
</div>

CSS：

/* This is your container with the background image */
.image-container {
    background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
    background-size:100%;
    overflow-x: hidden;
  position:relative;
}

/* This is the template that resizes the DIV based on background image size */
img.img-template {
    visibility: hidden;
    width:100%;
    height:auto;
}

/* This is the item you want to place (plant pot) */
.item {
    position: absolute;
    left: 14.6%;
    bottom: 80.3%;
    width: 15%;
    height: 15%;
    background: yellow;
    border: 2px solid black;
}

这是一个工作示例：http: //jsfiddle.net/cfjbF/3/

于 2016-12-09T21:50:41.317 回答
0

尝试使图像相对位置并手动设置对齐。

http://jsfiddle.net/cfjbF/1/

<head>
    <style>
        body {
            background: #000000;
        }

        #image1 {
            background: #008000;
            position: relative;
            left: 50px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<div id="image1"></div>
</body>
于 2012-11-05T14:26:41.230 回答
0

您的问题的解决方案：

https://stackoverflow.com/a/7660978/1256403

或者

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

于 2012-11-12T04:30:43.360 回答