反応の背景写真のJavaScriptアニメーション

4494 ワード
react reacjs css webdev テキストリンク

アニメーション背景写真
別の画面サイズで画面全体をカバーするために写真を取得するには、<body>タグに添付するのは良いです.
ライブラリBody-Classnameはドキュメントを指定する宣言的な方法を提供します.ボディ.クラス名.私は、JavaScriptでCSSスタイルを書くために、Emotionを加えました.
/** @jsx jsx */
(before ->  import React from 'react'; for emotion library ) 
import BodyClassName from 'react-body-classname';
import { jsx } from '@emotion/core'
(...)

let sectionStyle = (process.env.PUBLIC_URL + `/images/${image()}.png`) ;

let errorStyle =(process.env.PUBLIC_URL + `/images/error.gif`) ;
(...)

 <BodyClassName className="container" css={{ backgroundImage: `url("${errorState ? errorStyle : sectionStyle}")` }}>
(...)
 <BodyClassName/>

body{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    min-height: 100%;
    min-width: 100%;
}

どこにあなたのイメージを置くか?<src>
  • は、ソースフォルダにイメージフォルダを持って、そこからそれにアクセスします<img src="/images/imagename.png" alt='image'/>
    • <public>
  • Reports Docsはこのドキュメントをうまく説明しているので、パブリックフォルダに置かれたイメージでprocess.env.PUBLIC_URLを使用する必要があります.<img src={process.env.PUBLIC_URL + '/img/logo.png'} />
    • App.vue
    [モダンJavaScript深度Dave]式と文