0

私は自分のウェブサイトfinegra.inで別のものを重ねようとしています。現在のサイトのスクリーンショットは次のとおりです。

ここに画像の説明を入力

「私たちのキックスターター プロジェクトにアクセスしてください」という img がここに表示されるようにしたいだけです。 ここに画像の説明を入力

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

スタイル.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;
}
4

3 に答える 3

1

jQuery を使用していると仮定すると、DOM 対応関数で画像の透かしを作成し、それらの位置を絶対にして、画像に対して相対的に計算することができます。

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

透かしが含まれる画像と含まれない画像がある場合は、属性 class="withWatermark" を画像に追加し、スクリプトの $("img") を $(".withWatermark") に置き換えます。 .

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

 

$(".withWatermark").each(function (ix, el) {
于 2012-04-16T03:04:58.330 に答える
0

このようなものはどうですか？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 でヘッダー イメージをラップし、その div ラッパーに基づいて checkOurProject.png イメージを絶対値に設定する方が賢明な場合があります。

于 2012-04-16T02:37:47.103 に答える
0

float の助けを借りて単純な 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-16T06:20:10.360 に答える