3

背景画像をテキストでオーバーレイする方法を複数試しましたが、役に立ちませんでした。materializeCSS の Web サイトで提供されているテンプレートには視差が含まれていますが、これは望ましくありません。

目的は、ブラウザ ウィンドウ全体に広がる大きな画像の上に「カード」を配置することです。私は実際にこれをいくつかのカードに対して別々に行うことを目指しています。

これが私のコードです（特定のカード用）：

<div class="row center">
    <div class="col s12 l6 offset-l6">
        <div class="card z-depth-5 teal darken-4">
            <span class="card-title white-text text-darken-4">
            </div>
        </div>
    </div>          
</div>

画像タグが次のようになることを理解しています:

<img src="URL">

しかし、どこに置いても、カードの後ろに画像が配置されません。新しい div クラスを追加するなど、明らかなことはすべて試しましたが、間違った種類を追加している可能性があります。これには本当に頭を悩ませています。

カードの後ろに画像 (ブラウザの幅と高さ約 700 ピクセル) を配置するにはどうすればよいですか?

4

3 に答える 3

11

ご回答ありがとうございます。

最終的には非常に簡単でした：

<div class = "iris">
   <div class = "card transparent z-depth-5">
   </div>
</div>

基本的に、カードの div を div で囲み、この場合は虹彩の場合は、CSS を使用して背景画像を設定します。

.iris {
    background-image: url("");
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
}

カード クラス 'transparent' を使用すると、カードが実際に透けてガラスのように見えるクールな効果が得られますが、カードの影がそのエッジを照らすように、高い Z 深度インデックスが必要です。

Cheeeeeers

于 2015-07-12T13:59:44.520 に答える
2

あなたは2つの方法でこれを行うことができます

  1. background(background-image) css プロパティを使用します。background-sizeを設定して、背景のサイズを調整することもできます(つまり、親に含まれる画像を保持する、オーバーフローさせる、フィットするように伸ばすなど)。
  2. img 要素の css プロパティの位置を絶対に設定し、カードのz -index を img 要素の z-index よりも高い値に設定します。

マテリアライズ CSS がこれらの設定の一部に対して事前に作成された css クラスを提供しているかどうかわからない場合は、ドキュメントを確認する必要があります。

背景CSSプロパティ

CSS

.cardbg {
   background:url(URL) no-repeat 0% 0%;
   background-size:cover;
}

HTML

<div class="cardbg">
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
        </span>
    </div>
</div>

配置された img 要素

CSS

.container {
   position:relative;
}
.card {
   position:relative;
   z-index:10;
}
.cardbg {
   position:absolute;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   z-index:1;
}

HTML

<div class="container">
    <img src="URL" class="cardbg" />
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
        </span>
    </div>
</div>

バックグラウンド CSS デモ

.cardbg {
   position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
   background:url(http://placehold.it/1024x768) no-repeat 0% 0%;
   background-size:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="cardbg">
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
          Some card
        </span>
    </div>
</div>

配置要素のデモ

.container {
   position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
}

.card {
  position:relative;
  z-index:1;
}

.cardbg {
   position:absolute;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
  z-index:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="container">
    <img src="http://placehold.it/1024x768" class="cardbg" />
    <div class="card z-depth-5 teal darken-4">
        <span class="card-title white-text text-darken-4">
          Some text
        </span>
    </div>
</div>

于 2015-05-07T23:36:56.310 に答える
1

画像を一部の div の背景として、または全身として追加することもできます

body {
  background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLcjS59w8iUV6NqkYvcHOzlqS21rr13KyqGppuYJf5KI88AYB_IA');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet" />
<div class="row center">
  <div class="col s12 l6 offset-l6">
    <div class="card z-depth-5 teal darken-4">
      <span class="card-title white-text text-darken-4">Title</span>
      <p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
      <br>
      <p class="grey-text text-darken-1">Content sdfa sd fas dfa sdf</p>
    </div>
  </div>
</div>

于 2015-07-08T15:11:10.887 に答える