如何相对定位图像

时间：2014-05-09 08:57:07

标签： html css

Hai我是html和css的新手。我需要一些帮助。我有4张图片如下。 enter image description here 主背景图片

enter image description here 链接image1

enter image description here 链接image2

enter image description here 链接图片13

我需要最终看到所有图像

enter image description here 最后看

我的HTML就像

<div class="aside__block social-media-follow">
<div class="aside-block__content">
<img src="/media/19134/001.jpg"/>
<a href="#"><img src="/media/19133/Twetter.jpg"/></a>?
<a href="#"><img src="/media/19133/facebok.jpg"/></a>
<a href="#"><img src="/media/19133/insta.jpg"/></a>
</div>
</div>

任何人都可以帮助css定位社交链接图片。

3 个答案:

答案 0 :(得分：1)

您可以将“关注我们”图片作为背景图片放置，并将图标向上浮动，边缘为顶部和右边，以根据需要定位它们：

<强> FIDDLE

HTML： 

<div class="aside__block social-media-follow">
    <div class="aside-block__content"> 
        <a href="#"><img src="http://i.stack.imgur.com/lBlEE.jpg"/></a>
         <a href="#"><img src="http://i.stack.imgur.com/mxD7P.jpg"/></a>
         <a href="#"><img src="http://i.stack.imgur.com/FbE0s.jpg"/></a>
    </div>
</div>

CSS： 

.aside-block__content {
    width:314px;
    height:115px;
    background-image: url(http://i.stack.imgur.com/msmci.jpg);
}

.aside-block__content a{
    float:right;
    margin:50px 30px 0 0;
}

答案 1 :(得分：1)

<div class="aside__block social-media-follow">
<div class="aside-block__content">
<a href="#"><img src="http://i.stack.imgur.com/mxD7P.jpg"/></a>
<a href="#"><img src="http://i.stack.imgur.com/lBlEE.jpg"/></a>
<a href="#"><img src="http://i.stack.imgur.com/FbE0s.jpg"/></a>
</div>
</div>

在css中：

.aside-block__content  {
  background: url("http://i.stack.imgur.com/msmci.jpg") no-repeat;
  width: 310px;
  height: 100px;
}

.aside-block__content a img{
  float: right;
  margin-top: 50px;
  margin-right: 30px;
}

DEMO：http://jsbin.com/kexam/1/edit

enter image description here

答案 2 :(得分：1)

有几种方法可以做到这一点。

你可以通过......来做到这一点。

<强> HTML： 

<div id="wrapper"> <!-- wrapper with the background - image -->
  <div id="social_media"> <!-- a container for the social media icons -->
    <a href="#"><img class="icon" src="/media/19133/Twetter.jpg"/></a> <!-- Your Icons -->
    <a href="#"><img class="icon" src="/media/19133/facebok.jpg"/></a>
    <a href="#"><img class="icon" src="/media/19133/insta.jpg"/></a>
  </div>
</div>

<强>的CSS： 

#wrapper { background: url(/media/19134/001.jpg) no-repeat; }
#social_media { /*  Your positioning */ }
.icon { float:right; margin-left: 20px; }
相关问题
最新问题