Question

我希望我的内容更加透明，我添加了以下CSS代码：

import React, { Component } from 'react'
import './assets/css/bootstrap.css'
import './scss/auth.scss'
import AuthImage from './assets/img/chat-bg.jpg'
import Profile from './assets/img/avatars/avatar-male-1.jpg'
import { Link, Redirect } from 'react-router-dom';


import {app,  Cookies} from '../Shared/Globals'

export class register extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             fname:'',
             lname:'',
             email:'',
             pass:'',
             pass2:'',
             formValid : false,
             regFormBtn : 'Join Now',
             formError : {
                 error : false,
                 data : null
             }, 
             registered : false
        }

        this.handleRegisterForm = this.handleRegisterForm.bind(this)
        this.registerUser = this.registerUser.bind(this)
    }


    handleRegisterForm(event){
        this.setState({
            [event.target.name]:event.target.value
        })
        if(this.state.fname !== '' &&
           this.state.lname !== '' &&
           this.state.email !== '' &&
           this.state.pass  !== '' &&
           this.state.pass2 !== '' 
          ){
            this.setState({
                formValid : true
            })
          } else{
            this.setState({
                formValid : false
            })
          }
    }

    registerUser(event){
        event.preventDefault();
        
        if(this.state.formValid){
            this.setState({
                regFormBtn : 'Joining ...',
                formValid : false
            })
            app.auth().createUserWithEmailAndPassword(this.state.email, this.state.pass)
            .then( res => {
                console.log(res);
                new Cookies().createCookie("uid", res.user.uid, '10 minutes');
                this.setState({
                    regFormBtn : 'Success !'
                })
                this.resetForm();
                this.setState({
                    registered : true
                })
            })
            .catch( error =>{
                console.log(error);
                this.setState({
                    formValid : true,
                    regFormBtn : 'Try Again'
                })
                let err = {...this.state}
                err.formError.error = true
                this.setState({
                    err
                })
                switch(error.code){
                    case 'auth/email-already-in-use':
                    case 'auth/weak-password':
                    case 'auth/network-request-failed':
                        {
                            let err = {...this.state}
                            err.formError.data = error.message
                            this.setState({
                                err
                            })
                            break;
                        } 
                        default:
                }
            })
        } else{
            console.log("Form is invalid");
        }

    }
    
    
    render() {
        let e = '';
        if(this.state.formError.error){
           e =  <div className='error'>{this.state.formError.data}</div>
        } else{ e = '' }
        if(this.state.registered){
            return <Redirect to='/app' />
        }
        return (
            <>
                <div className='container auth-row'>
                    <div className='row'>
                        <div className='col-6'>
                            <div className='auth-img'>
                                <img src={AuthImage} alt='auth' />
                            </div>
                        </div>

                        <div className='col-6' >
            <div className='auth'>
                <div className='auth-head'> Join Our Chat Community Now !</div>
                <div className='auth-form'>

                    <form className='row' method='POST' onSubmit={this.registerUser}>
                        <div className='col-12'> {e} </div>
                        <div className='rcaInput col-6'>
                            <input type='text' placeholder='First Name' name='fname' onChange={this.handleRegisterForm} />
                        </div>
                        <div className='rcaInput col-6'>
                            <input type='text' placeholder='Last Name' name='lname' onChange={this.handleRegisterForm} />
                        </div>
                        <div className='rcaInput col-12'>
                            <input type='email' placeholder='Email Address' name='email' onChange={this.handleRegisterForm} />
                        </div>
                        <div className='rcaInput col-12'>
                            <input type='Password' placeholder='Password' name='pass' onChange={this.handleRegisterForm} />
                        </div>
                        <div className='rcaInput col-12'>
                            <input type='Password' placeholder='Repeat Password' name='pass2' onChange={this.handleRegisterForm} />
                        </div>
                        <div className='btn-space col-12'>
                            <button className='rcaBtn' type='submit' disabled={!this.state.formValid}> {this.state.regFormBtn} </button>
                            <div className='small-font' style={{paddingTop:'10px'}}> Already have an account ? <Link to={'/login'} > Login Now</Link> </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

                    </div>
                </div>
            </>
        )
    }
}

export default register

}

如何增加该值？感谢您的帮助。

Answer 1

您可以使用rgba（）颜色代码：前3个值用于rgb 第四个值用于Alpha通道并定义颜色的不透明度 alpha值可以从零0（透明）到1 1（不透明）。

Answer 2

如果您希望内容透明，则可以借助 opacity CSS

.hentry {
 opacity: 0.8;
}

0.8 是值，您可以根据需要在0到0.9之间定义任何值

如何增加CSS的内容透明度？

2 个答案: