How to make this type of image popping out of box using XHTML css_问答_开发者

How to make this type of image popping out of box using XHTML css

开发者 https://www.devze.com 2022-12-29 00:04 出处：网络

How to make this开发者_JS百科 type of image popping out of box using XHTML css. without using whole box along with image as a background

相关专题：css xhtml

How to make this开发者_JS百科 type of image popping out of box using XHTML css. without using whole box along with image as a background

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

Only globe image will be image.

The globe needs to be a transparent png, and then style the box ignoring the image, padding and a border to get the desired look. Then, whack position: relative on the box, and position: absolute on the image inside it. Then use top: Xpx; left: Xpx; to position the image as you like.

Edit: I've taken the code from the siulamvictor below, and edited it so it'll work for you.

<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>

Change the top and right properties to positon the image as you need it.

<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;
}

try this :)

<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>