11

私の質問は非常に単純calc()です。純粋な CSS の背景画像の背景サイズに対して機能します...

現在、レスポンシブモバイルビューの背景画像を修正しています...画像を画面の比率で固定したままにして、モバイル画面でサイズを変更したい...

このコードを実装しましたが、現在は機能していません:

@media (max-width: 767px) { 
   body { 
      background-size: calc(100%-200px) auto; 
      background-repeat: repeat; 
   }    
}

純粋なCSSで可能ですか?

4

1 に答える 1

15

はい、%、em、rem、px、cm、vh などの単位で数値を入力できる場所ならどこでも機能します。

私もこれに出くわしました:の前後にスペースを入れる必要-があります:

calc(100% - 200px)

ここで似たようなことを尋ねました: CSS calc(100%-250px) が機能しないのはなぜですか?

MDN ドキュメントから:

注: +and-演算子は常に空白で囲む必要があります。calc(50% -8px)たとえば、のオペランドは、パーセンテージの後に負の長さ (無効な式) が続くものとして解析されますが、 のオペランドcalc(50% - 8px)は、パーセンテージの後にマイナス記号と長さが続くものです。さらに、calc(8px + -50%)長さの後にプラス記号と負のパーセンテージが続くものとして扱われます。*and/ 演算子に空白は必要ありませんが、一貫性を保つために空白を追加することは許可されており、推奨されています。

出典: MDN

W3C ドキュメント

于 2015-06-06T05:00:18.990 に答える