Как сделать этот тип изображения всплывающим из коробки, используя XHTML CSS - PullRequest
Новая
       9

Как сделать этот тип изображения всплывающим из коробки, используя XHTML CSS

0 голосов
/ 05 мая 2010

Как сделать, чтобы этот тип изображения высовывался из коробки, используя XHTML css. без использования целой рамки вместе с изображением в качестве фона

альтернативный текст http://shup.com/Shup/330963/1104592352-My-Desktop.png

Только изображение земного шара будет изображением.

Ответы [ 3 ]

2 голосов
/ 05 мая 2010

Глобус должен быть прозрачным 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>

Измените свойства top и right так, чтобы изображение располагалось так, как вам нужно.

0 голосов
/ 05 мая 2010 
<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;
}
0 голосов
/ 05 мая 2010

попробуйте это:) 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...