Question

如何使用XHTML css使这种类型的图像弹出框。不使用整个框以及图像作为背景

alt text http://shup.com/Shup/330963/1104592352-My-Desktop.png

只有全球图像才会成像。

Answer 1

地球需要是一个透明的png，然后在框中设置样式，忽略图像，填充和边框以获得所需的外观。然后，敲击位置：相对于框，位置：绝对在其内部的图像上。然后使用top：Xpx;左：Xpx;根据需要定位图像。

编辑：我从下面的siulamvictor中获取了代码，并对其进行了编辑，因此它对您有用。

<html>
<head>
<style type="text/css">

.box {
    position: relative;
    width: 260px;
    border: #000 1px solid;
    background: #d5d5d5;
    padding: 20px;
}

.box img {
    display: block;
    position: absolute;
    z-index: 2;
    top: 5px;
    right: 5px; 
}

</style>
</head>

<body>

<div class="box">
  Text here.
  <img src="image.png" />
</div>
</body>

</html>

根据需要更改顶部和右侧属性以定位图像。

Answer 2

试试这个：）

<html>
<head>
<style type="text/css">

.box {
    position: relative;
    width: 300px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color: #d5d5d5;
    height: 60px;
    padding-top: 20px;
    padding-left: 20px;
}

.image {
    display: block;
    position: absolute;
    z-index: 2; 
    right: 20px;
}

</style>
</head>

<body>

<div class="box">
Text here.
<img src="image.png" class="image" />
</div>
</body>

</html>

Answer 3

<div class="globe-box">Some text<div class="globe"></div></div>

.globe-box {
  position: relative;
  border: 1px solid black;
  padding-right: 110px; /* width of globe + some padding */
  margin-bottom: 20px; /* how much globe should stick out of the bottom */
}

.globe-box .globe {
  width: 100px; height: 100px; /* size of globe */
  background-image: url(globe.png);
  position: absolute;
  bottom: -20px; /* same as margin-bottom above only negative */
  right: 10px;
}

如何使用XHTML css使这种类型的图像突然出现

3 个答案: