バックグラウンドイメージ（Html、ブートストラップ、CSS）の上に画像を配置できません

よろしくです。divの要素の「高度な」位置付けに問題があります。私は実際には、他のオブジェクトの上にオブジェクトをどのように配置するかについては分かりません。私はこれを複数の方法で試してみました。ここで回答を読んで、すべてのチュートリアルを検索しましたが、理解できないようです。：/バックグラウンドイメージ（Html、ブートストラップ、CSS）の上に画像を配置できません

これは、別の画像の上に画像を中央に配置して重ね合わせる最近の試みです。このタスクを完了するの

<body> 

<div class="container-fluid"> 
    <img class="img-responsive" src="file:///E:/HTML_CODE/HexStars.png" alt="HexStars" style="position:relative;"> 
    <div class="row"> 
     <div class="col-sm-4"></div> 
     <div class="col-sm-4"><img class="img-responsive" src="file:///E:/HTML_CODE/HexLogo.png" alt="HexStars"></div> 
     <div class="col-sm-4"></div> 
    </div> 
</div> 

</body>

私の最初に考えたのは、単に背景画像を使用していたと私はそれだけでそのを考慮背景画像を無視想像として一方を他方の上に重ねると面倒する必要がありませんバックグラウンド。

私の試みが失敗した後、私は両方のimgが相対的な 'バックグラウンド'イメージを設定し、後者は運がない絶対的なものに流体容器を使用しようとしました。

9回中10回オーバーレイしようとしている写真イムは、写真の下に座って、背中を冷やそうとしています。

残念なことに、誰かが画像を並べ替える方法を説明するのを助けて、人々が魔法のようにピクセル座標を知っているかどうかわからず、imgマップを簡単にレイアウトできます。

とにかく私はしばらくの間、私はおそらくインコヒーレントで眠っていない。前もって感謝します。

編集：

なぜこれは機能しませんか？

body { 
     background-color: #1a1a1a; 
     background-image: file:///E:/HTML_CODE/HexStars.png("HexStars"); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
    }

イムので、ダム、私はCSSの背景画像を使用しますが、イムはまだ私の質問の上半分に混乱する方法を考え出しました。

出典

2016-09-21 Mike Remley

あなたのHTMLとCSSのファイル全体を投稿してください – Stormhashe

私の試みは、私は両方のIMGのは、どちらかが運絶対に相対後者として「背景」の画像を設定ための流体容器を使用してみましたが失敗した後。

これは逆です。 position: absoluteは、DOMのフローからイメージを取り出して、他の要素をその上に置くことができます。背景のimgコンテナにposition:absolute、画像の上にposition:relativeが必要です。

なぜこれが機能しませんか？

本文{ 背景色：＃1a1a1a; background-image：file：/// E：/HTML_CODE/HexStars.png（ "HexStars"）; background-repeat：no-repeat; background-attachment：fixed; }

背景の画像値が正しくフォーマットされていないように見えます。 background-image: url("paper.gif");それとも、このような何かを提供する例があるとします：background-image: url("file:///E:/HTML_CODE/HexStars.png");

出典

2016-09-21 20:23:48

私は投稿後すぐにCSSに間違いを感じました。しかし、私はそれらの位置設定を試みます。助けのためのトンをありがとう:) –

使用この

HTMLのようなもの：

<div class="image img img-responsive img-thumbnail full-width"> 
    <img src="......" alt /> 
</div>

はCSS：

.image{ 
    position:relative; 
    overflow:hidden; 
    padding-bottom:100%; 
    width: 100%; 
} 
.image img{ 
    position:absolute; 
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%); 
}

それはより次のようになります。これにより、画像が垂直に配置されます。あなたが水平にしたい場合は、translateX（50％）とleft：50％を加えてください。

出典

2016-09-21 20:29:18 tsanchev

ああ！オーバーフロー、私が探していたthats！私は残りの部分を確かめます。ご協力いただきありがとうございます：） –

バックグラウンドイメージ（Html、ブートストラップ、CSS）の上に画像を配置できません

答えて

関連する問題