zoukankan      html  css  js  c++  java
  • react 如何引入图片, 背景图片, 盒子上下左右居中

    import React, { Component } from 'react'
    import Img from '@/assets/logo.png'  //这个图片,是src下assets文件夹
    import './styles.less'
    
    export default class Imgs extends Component {
      render() {
        return (
          <div className='pages_img' style={{ backgroundImage: `url(${Img})` }}>
            <section className='section'>
            </section>
            {/* <img src={Img} /> */}
          </div>
        )
      }
    }
    

      

    .pages_img{
      height: 100%;
      max- 1920px;
      background: no-repeat center center;
      //background: url("../../assets/logo.png")  no-repeat center center;  //上面是通过 style 直接写的 如果不用style 在less 中 可以这样写
      margin: 0 auto;
      display: flex;
      section{
         500px;
        height: 500px;
        background: rgba(255, 255, 255, 0.5);  //盒子背景半透明
        margin: auto auto;
        // opacity: 0.5  //盒子半透明
      }
    }
    

      

  • 相关阅读:
    AI ResNet V1
    Lua基础
    git命令小结
    定时器及时间轮
    expect
    vscode 常用快捷键
    动态链接库与共享内存:
    container_of机制
    ELF文件格式
    git学习补充
  • 原文地址:https://www.cnblogs.com/yetiezhu/p/12865132.html
Copyright © 2011-2022 走看看