如何在另一個img上放置img

我想在我的網站finegra.in上放置另一個。下面是該網站的截圖現在：如何在另一個img上放置img

enter image description here

我只是想「參觀我們的Kickstarter項目」 IMG去這裏： enter image description here

這裏是HTML和樣式表：

<div id="page" class="hfeed"> 
    <header id="branding" role="banner"> 



      <!-- 
<nav id="access" role="navigation"> 
       <h3 class="assistive-text">Main menu</h3> 
           <div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div> 
       <div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div> 
           <div class="menu"><ul><li class="current_page_item"><a href="http://www.finegra.in/" title="Home">Home</a></li></ul></div> 
      </nav><!~~ #access ~~> 
--> 

      <hgroup> 
      <div> 
       <a href="http://www.finegra.in"><img id="logo" alt="fine grain Logo" src="http://www.finegra.in/wp-content/uploads/2012/04/fineGRAINlogoGOOD-WEB.png"> 
</a> 
<img id="headerimg" alt="The Sheffield Case" src="http://www.finegra.in/wp-content/uploads/2012/04/headerimg2.jpg"> 
<a href="http://www.kickstarter.com/projects/finegrain/17408941?token=364cb635"><img id="branding" alt="The Sheffield Case" src="http://www.finegra.in/wp-content/uploads/2012/04/checkOurProject.png"> 
</a> 

      </div> 
      <div id="site-generator"> 
       FineGrain LLC Copyright 2012. All Rights Reserved 
      </div> 
     </hgroup> 
    </header><!-- #branding -->

的style.css：

#branding { 
    border-top: 0px solid #BBBBBB; 
    padding-bottom: 10px; 
    position: relative; 
    z-index: 9999; 
    background: none repeat scroll 0 0 #DADAD2; 
} 

#headerimg { 
    width: 30% !important; 
    width: 100% !important; 
} 

#branding img { 
    margin-bottom: 20px; 
    width: auto; 
} 

.one-column #page { 
    max-width: 1500px; 
} 

.one-column #content { 
    margin: 0; 
    width: auto; 
}

來源

2012-04-16 novicePrgrmr

這樣的事情呢？ http://jsfiddle.net/UtKbC/

CSS：

.visit_project { 
    position: absolute; 
    top: 250px; 
    left: 400px; 
}

HTML：

<a href="http://www.kickstarter.com/projects/finegrain/17408941?token=364cb635" class="visit_project"><img id="branding" alt="The Sheffield Case" src="http://www.finegra.in/wp-content/uploads/2012/04/checkOurProject.png"> 
</a>

這可能是明智的包裹頭形象在它自己的DIV和checkOurProject.png圖像設定基於該絕對值div封裝。

來源

2012-04-16 02:37:47 ngen

好做的，好點的有關獨立股利。現在我知道這不是我的問題，但是有沒有辦法讓「訪問我們的kickstarter項目」圖像具有透明背景而不是背後的背景顏色？這是一個帶有透明背景的PNG – novicePrgrmr 2012-04-16 02:56:43

您是否使用透明背景保存圖像？ PNG是正確的格式使用。 – ngen 2012-04-16 03:00:27

是的，我做到了，這就是爲什麼我認爲它的表現如此怪異 – novicePrgrmr 2012-04-16 03:02:27

假設您使用的是jQuery，您可以在DOM Ready函數中爲圖像創建水印，並使其位置絕對相對於圖像進行計算。

<script type="text/javascript"> 

    // Watermark image, change the src with your image's url 
    var watermark = '<img src="watermark.png" border="0" style="border:none; background-color:transparent; position:absolute; '; 

    // Position relative to image inside: 
    var insideTop = 20; 
    var insideLeft = 50; 

    $(document).ready(function() { 
     $("img").each(function (ix, el) { 
      var top = $(this).offset().top + insideTop; 
      var left = $(this).offset().left + insideLeft; 
      var imgWatermark = watermark + 'top:' + top + 'px; left:' + left + 'px;"/>'; 
      $("body").append(imgWatermark); 
     }); 
    }); 

</script>

如果您有將有水印和圖像不會，一個屬性類=「withWatermark」添加到將具有和在腳本替換$（「IMG」）圖像的圖像$（「withWatermark」）。

<img src="myimage.jpg" class="withWatermark" />

$(".withWatermark").each(function (ix, el) {

來源

2012-04-16 03:04:58

我想你可以通過簡單的CSS與浮動的幫助下很容易地做到這一點： -

CSS

#header { 
    background: url("http://i.imgur.com/1nrC6.jpg"); 
    width:1040px; 
    height:402px; 
} 

.logo { 
    float:right; 
    margin-top:200px; 
}

HTML

<div id="header"> 
<a href="#"><img class="logo" src="http://i.imgur.com/17oqa.png"border="0"/></a> 
</div>

看到演示： - http://jsfiddle.net/UtKbC/6/

來源

2012-04-16 06:20:10

如何在另一個img上放置img

回答

相關問題