div react 网络背景图_react 给div加背景图 - CSDN
  • 1. 如何在react js 项目中设置div 背景图片 在传统的项目中我们只需要在css文件中定义样式,然后给div添加相应的class即可, 但是在react.js中,尤其是在用webpack 搭建的环境中,似乎直接写定义class样式就 不...

    1. 如何在react js 项目中设置div 背景图片

         在传统的项目中我们只需要在css文件中定义样式,然后给div添加相应的class即可,

    但是在react.js中,尤其是在用webpack 搭建的环境中,似乎直接写定义class样式就

    不太管用了,因为这样的react项目,定义class属性需要用驼峰className={Obj(一个对象)},

    而定义标签上的样式则用 style={(一个对象)},的形式。

     

    2.那么我们该如何给一个div添加背景图片呢?

    如下:

    //首先引入需要的图片路径
    import Background from '../../../images/login.jpg';
    
    //定义背景样式
    
    var sectionStyle = {
      width: "100%",
      height: "400px",
    // makesure here is String确保这里是一个字符串,以下是es6写法
      backgroundImage: `url(${Background})` 
    };
    
    export default class Login extends Component{
    //渲染页面
    render(){
            return (
        <div style={sectionStyle}></div>
            )
    
        }
    
    }

    3.代码截图

      

    -----------结尾的分割线--------------------------------

    4,如果您觉得我的文章对您有所帮助,欢迎打赏-----------谢谢-------

    转载于:https://www.cnblogs.com/vali/p/6419636.html

    展开全文
  • react添加图片 react添加背景图片

    千次阅读 2018-04-09 16:54:30
    1.import logo from "../../style/imgs/logo.png"//图片相对路径2....div className="login" style={{backgroundImage:`url(${logo})`}}&gt;//添加背景图片 &lt;img src={...

    1.import logo from "../../style/imgs/logo.png"//图片相对路径

    2.

     render() {
            return (

                <div className="login" style={{backgroundImage:`url(${logo})`}}>//添加背景图片

                  <img src={logo}/>//添加img图片

                </div>

            );
        }



    展开全文
  • 这里注意,如果简写里要写background-size,则这里必须写 / ,否则整个背景图片样式没有解析出来。 它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面...

    具体background简写可以参考这篇文章.

    这里注意,如果简写里要写background-size,则这里必须写 /  ,否则整个背景图片样式没有解析出来。

    它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size

    <div style={{
                                display: 'inline-block',
                                width: '208px',
                                height: '100%',
                                background: `url("${thumb[0]}") center center / cover no-repeat`,
                            }}>
    </div>

    效果如图:

    代码解析之后样式:(即使顺序不是这样写的解析出来也是这样的)

     如果分开写background其他设置,会出现一个问题,就是第一次加载图片是cover覆盖的,no-repeat,center center,但是打开其他页面再回来这些样式就都不生效了,只剩一个背景图片了。

    展开全文
  • react 设置div背景

    千次阅读 2019-04-12 11:46:16
    关键前端代码 import deskBg from '../../assets/image/desk_bg....div style={{width: '100%', height: '100%', textAlign: 'center',background:`url("${deskBg}") center center / cover no-repeat` }}>刘云生...

    关键前端代码

    import deskBg from '../../assets/image/desk_bg.png';
    
     <div style={{width: '100%', height: '100%', textAlign: 'center',background:`url("${deskBg}") center center / cover no-repeat` }}>刘云生</div>;
    
    
    
    展开全文
  • 图片大小不一样,而盒子大小一样,那么为了避免图片变形显示,这时候就最好使用背景图。...react中循环遍历背景图核心代码: render() { return ( <div className="act"> 活动 { this.state....
  • React 通过style来设置背景图片。

    千次阅读 2020-01-06 15:11:57
    React中,给元素设置样式主要有两种, 一,引入CSS文件 这种不用多说,通过 import import '../views/css/bases.css'; 这种方式适合,样式比较复杂,多的情况。 二,设置元素的 style <main type="lock" ...
  • React 页面中插入图片 React 页面中设置背景图 网上看好多都不能用,正确的做法: backgroundImage: "url(" + require("../imgs/bg_pc.jpg") + ")" 只要是在页面中,直接加载图片资源都要使用 require ...
  • react 组件添加背景图片

    千次阅读 2017-09-12 10:44:48
  • react中引入图标和背景图片

    万次阅读 2017-11-15 19:02:57
    首先引入想要的图片,请看上面的目录 import homebackground from '../../assets/images/homebackground2x.png'; const homeImage = { backgroundSize: '100% 100%', //记得这里100% background: `url(${ ...
  • css控制背景图片随div的大小而缩放

    万次阅读 2010-06-30 17:01:00
    在网页布局时我们经常会遇到这样的问题:图片的分辨率是1024*768,在1024*748的屏幕上能显示完整,一旦在800*600的屏幕上是就显示不完整,为了让图片的大小能适应不同的分辨率,可以这样来设置背景:  ...
  • react内嵌div高度屏幕自适应

    千次阅读 2017-03-28 17:51:32
    怎样让一个div高度自适应浏览器高度在应用中很常见,这是一个前端开发人员老生常谈的问题。在我们一般的开发中只要设置了下代码,就可以让div自动适应屏幕的高度。 html,body,div{ height:100% } 但是最近我在写...
  • 转载请标明出处:http://blog.csdn.net/u010046908/article/details/50781360 本文出自:【李东的博客】最近一直非常的关注react-native的开发,每天都会看到江清清技术专栏中关于react-native的 使用,基本上从搭建...
  • 有一个div,大小会随着屏幕的分辨率而自适应调整,现在要在其中设置一张背景图片,图片完全填充div,同时也需要图片自适应的调整大小 实现方法 css确实不熟悉,只能查找资料,通过查找的资料有提通过设置...
  • ES6 React 组件引用本地图片问题

    万次阅读 2017-12-21 14:34:37
    最近在用create-react-app 脚手架自己写一个小项目,遇到了很多坑,其中有一个就是React 引用本地图片的问题,我的需求是,图片的路径写在json文件里,需要从后台读取json文件,然后读取到图片的路径,在前端渲染。...
  • 背景图片设置透明度而不改变内容

    千次阅读 2019-05-07 12:48:35
    想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话,会...把图片设置透明度(这是通过本地图片设置背景图片,详情参考设置背景图片),而整个div不设置 <view class='item'> <image cla...
  • React中实现一个简单的SVG背景图

    千次阅读 2019-03-26 19:15:07
    React中实现简单的Svg背景框 首先我们需要定义一个SVG.jsx组件,这个组件用于绘制svg背景: import React from 'react' import { Component } from 'react' export default class Svg extends Component { ...
  • React 组件图片库的延迟加载

    千次阅读 2017-03-08 04:12:58
    react 图片 延迟加载
1 2 3 4 5 ... 20
收藏数 3,577
精华内容 1,430
关键字:

div react 网络背景图