CSSから画像を上書きする

Question

500ピクセルの解像度でhtml画像を変更する必要があります。

コードスニペットでわかるように3つの画像がありますが、500ピクセルの解像度では1つの画像しか必要ありません。 私はメディアのクエリを、私はそこにあるすべてのCSSコードを作った。私はモバイル向けの画像を別のコンテナに入れようとしましたが、これは最初に設定された別のコンテナに入れられました。

display: none 

私はメディアクエリー

@media all and (max-width: 500px){..} 

にいるとき、私はそれを

display : inline 

を設定するしかし、それだけでは動作しません。何も表示しません。 私は

#experiential_2_img{ 
    background: url('images/experiential-insurance_fraud.jpg'); 
    background-size:auto; 
    width:0px; 
    height: 0px; 

ために設定しようとしたが、それはあまりにも、デスクトップ用に設定されている画像を表示します。 これを解決するにはどうすればよいですか？

#experiential_1_img{ 
 
    \t display: none; 
 
    } 
 
    #experiential_3_img{ 
 
    \t display: none; 
 
    } 
 
    #experiential_2_img { 
 
    \t display: none; 
 
    } 
 
.experiental-container-mobile { display: inline;} 
 

 
    /*#experiential_2_img { 
 
\t \t  background: url('images/experiential-insurance_fraud.jpg'); 
 
     background-size:auto; 
 
     width:0px; 
 
     height: 0px; 
 
    }*/

<div class="home_thirdrow"> 
 
     <div class="experiental-header"> 
 
      <a href="http://staging.princetonpartners.com/experiential"> <h3>Experiential</h3> </a> 
 
     </div> 
 
     <div class="experiental-container"> 
 
      <img id="experiential_1_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-amanda_phillies.jpg" 
 
       alt="Amanda_Phillies"> 
 
     </div> 
 
     <div class="experiental-container"> 
 
      <img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-philadelphia_zoo.jpg" 
 
       alt="philadelphia_zoo"> 
 
     </div> 
 

 
     <div class="experiental-container-mobile" style="display: none; "> 
 
      <img id="experiential_2_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg" 
 
       alt="philadelphia_zoo"> 
 
     </div> 
 
     
 
     <div class="experiental-container"> 
 
      <img id="experiential_3_img" src="<?php echo get_template_directory_uri(); ?>/images/experiential-insurance_fraud.jpg" 
 
       alt="insurance_fraud"> 
 
     </div> 
 
    </div>

Answer 1

それは、モバイル・スタイルシートおよびデスクトップのためにこれを拡張して、あなたのサイトを開発するのが無難で、これらの日に。

理由：Moble上

デスクトップビュー：プケ：デスクトップ上の

モバイルビュー：OK：

@media screen and (min-width: 768px) { 
    #experiential_1_img { 
      display: inline; 
    } 

    #experiential_3_img{ 
      display: inline; 
    } 
    #experiential_2_img { 
      display: inline; 
    } 

    .experiental-container-mobile { display: none;} 
} 

.experiental-container-mobile { display: inline;} 

#experiential_1_img{ 
    display: none; 
} 
#experiential_3_img{ 
    display: none; 
} 
#experiential_2_img { 
    display: none; 
} 

Answer 2

私はあなたがレースを持っているのか分かりませんこれはあなたのcssファイルのプロジェクトへのリンクを修正したものです。

背景画像のパスでは、前のフォルダに戻って画像を入力する必要があります。

例： 背景：url（ '../ images/experiential-insurance_fraud.jpg'）; 。 2つのポイントは、ディレクトリを戻す。