react中设置background-size（有效）

最新推荐文章于 2023-09-23 08:00:59 发布
最新推荐文章于 2023-09-23 08:00:59 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： 心得 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43676606/article/details/103880287
版权

在100% 100%前面加斜杠“/”才起作用（作用是全面拉伸图片）

   background: `#5150F2 url(${require("../../components/images/phoneNum.png")}) no-repeat center /100% 100%`,

不知道为什么单独写出来不起作用

   background: `#5150F2 url(${require("../../components/images/phoneNum.png")}) no-repeat`,
   backgroundSize:'100% 100%',

参考：react组件background设置

西柚要努力
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react_background_linear-gradient_particles-js：reactjs使用具有线性渐变背景的particles-js
02-21
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中
react-quill的使用
02-25
然后，在 React 组件中引入 ReactQuill 和 Quill： ```jsx import ReactQuill, { Quill } from 'react-quill'; import 'react-quill/dist/quill.snow.css'; import quillEmoji from 'quill-emoji'; import "quill-...
react组件background设置
想飞上天和太阳肩并肩
01-23 5946
<div style={{ background: "url("+require("../../assets/selected_home.png")+") 0 0 / 16px 16px" }} >888</div>
react 中 background-image引用
miin_ying的博客
07-01 3053
能用的代码就是好代码之-background-image的引入
React内联方式使用backgroundImage
dk123sw的博客
03-27 2860
针对项目内图片文件 <div style={{ backgroundImage: `url(${bgImg})`, ...extraStyle }} /> <div style={{ backgroundImage: `url(${require("./12.jpg")})`, ...extraStyle }} /> 针对Url <div
react项目导入背景图片显示background-image: url([object Module])
qq_37832645的博客
03-31 2911
尝试了配置file-loader无果 最后发现直接在导入图片的路径后面加上.default就可以了 background-image: url(${require('@/assets/img/sprite_01.png').default});
react-bem-helper:用于React的BEM库
05-01
react-bem-helper 用于... 特征可配置的BEM mixins支持模块化CSS支持流程定义非常小的束〜8Kb 几乎没有依赖 先决条件BEM方法论高阶组件流类名 用法.some-button padding : 8 px & --major background : blue & --size
react-native-global-props：一个简单的javascript实现，可向react-native组件添加自定义的默认props
02-05
body { background-color : 'teal'}p { font-size : 12 , font-family: 'Helvetica Neue'} 还是摆脱Android中每个TextInput底部的丑陋行？死了！ 现在你可以！安装npm i react-native-global-props --save
background-emoji：简单的表情符号背景生成器:fire:
02-05
例如，可以使用CSS的`background-size`属性来控制背景的大小，`background-position`来调整位置，以及`background-repeat`来决定是否重复背景。 **PNG（Portable Network Graphics）** PNG是一种广泛使用的位图...
background-generator
04-07
在实际应用中，背景生成器可以结合其他前端框架（如React、Vue或Angular）来实现更复杂的功能，如动态响应式设计，根据屏幕尺寸或设备类型自动调整背景。此外，还可能涉及到用户存储偏好、本地存储或者服务器端的...
react 给元素添加背景图
YiZhiMei01的博客
04-10 1530
import Background from '../../images/water1.png' const sectionStyle = { width: '100%', height: '100%', background: `url(${Background}) no-repeat center center fixed`, backgroundSize: '...
Create-react-app关于require()的理解与使用（backgroundImage）
Jesus_z的博客
06-15 1165
Require('../xx/xx') 在脚手架中的静态文件在运行后的位置是会发生改变的，并且命名也会不同，所以直接写上路径可能会找不到相应的文件，所以我们应该使用require()来获取资源路径。 该方法最终是返回一个url的字符串，所以像src属性可以直接用它赋值，而在css这种使用 url('xx/xx/xxx') 时，外面的url是是必须带上的，而里面的路径需要使用require()来获取。 1. 对于img的src属性而言： src={require('xxx/xxx/xx')} 2.
native react 可伸缩背景_在React Native中添加全屏背景图像的最佳方法是什么？
weixin_28973627的博客
12-30 254
I wanted to add a full screen image to the View so I write this codereturn ()and defined the style asvar styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',b...
react-router学习笔记之入门
热门推荐
phpzealer的专栏
05-13 1万+
react-router学习笔记之入门 react-router是react的一个强大的路由库 react-route可以是UI和路由同步。简单的API却有非常强大的功能：延迟加载、动态路由匹配、路径转换权限处理。让你的url变得更加直观。 通过下面几个例子来进行学习：一 创建一个项目环境要求：node，npmgit clone https://github.com/reactjs/rea
如何使用React更换背景颜色
最新发布
TianXuab的博客
09-23 1237
React作为一种流行的JavaScript库，为我们构建交互式Web应用程序提供了强大的工具和技术。在本文中，我们将探讨如何使用React更换背景颜色的代码示例，帮助您快速上手并实现自定义的背景颜色效果。
React 中五种常见的样式
song854601134的博客
03-09 3046
内联样式 CSS样式表 CSS模块 styled-components JSS
react如何引入图片（背景图或img标签）
weixin_57399180的博客
01-31 2060
react如何引入图片（背景图或img标签）
React 中插入图片的三种方式
xiaoxiaokuer的博客
09-05 1416
React 中插入图片的三种方式
关于React 行内样式backgroundImage的设置
m0_47781638的博客
12-22 6530
在做练习的时候解决的这个问题，看了挺多别人的文章，加上了.default style={{backgroundImage:"url("+require("./image/pic-img1.jpg").default+")"}}
react中让background自适应大小
07-15
在 React 中让背景自适应大小可以使用 CSS 的 `background-size` 属性来实现。具体的做法是给包含背景的元素添加相应的样式。 假设你有一个容器元素，你想要让其背景图片自适应大小，可以按照以下步骤进行操作： 首先，给容器元素添加一个样式类或内联样式，并设置 `background-image` 属性为背景图片的路径。例如： ```jsx import React from 'react'; const BackgroundContainer = () => { return ( <div className="background-container"> {/* 内容 */} </div> ); } export default BackgroundContainer; ``` 接下来，在对应的 CSS 文件或样式模块中，为该容器元素添加样式并设置 `background-size` 属性为 `cover`，这将使背景图片自适应容器大小并保持纵横比。例如： ```css .background-container { background-image: url('path/to/background-image.jpg'); background-size: cover; } ``` 你也可以使用其他值来控制背景图片的自适应行为，例如 `contain`，它将保持背景图像完全可见并适应容器大小，但可能会导致图像被拉伸。 如果你想要背景图片平铺填充整个容器而不进行自适应调整，可以将 `background-size` 属性设置为 `100% 100%`。这样背景图片将水平和垂直方向上平铺填充整个容器。 ```css .background-container { background-image: url('path/to/background-image.jpg'); background-size: 100% 100%; } ``` 根据你的需求，你可以使用不同的 `background-size` 值来实现背景自适应大小的效果。记得替换 `path/to/background-image.jpg` 为你实际的背景图片路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值