react项目中，使用styled-components编写样式，给元素添加背景图不生效。



background直接设置十六进制颜色或者颜色的英文名称都是可行的，但是使用url无作用，那就是url问题了，于是我想换一种思路，能不能把图片import进来，放进url里，避免错误的路径呢，于是



哎嘿，好使了

css设置backgroud：url(),无效的更多相关文章

  1. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  4. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  5. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  6. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  7. webpack生成的css文件background-image url图片无法加载

    之前在使用webpack3构建基于less预处理的项目时,在对指定的元素使用background-image: url(xxx)来设置背景图片时,本地开发是ok的,但是在项目编译产出后背景图片就找不到 ...

  8. @Html.DropDownList 设置选中值无效

    有时候在ASP.NET  MVC中用@Html.DropDownList 设置选中值无效,如图: 具体原因说不清,反正只要改个名字就行了!!!,如图:::

  9. CSS设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  10. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

随机推荐

  1. shell中 ${}, ##, %%, :-，:+, ? 的使用

    假设我们定义了一个变量为:file=/dir1/dir2/dir3/my.file.txt 可以用${}分别替换得到不同的值:${file#*/} 删掉第一个/及其左边的字符串:dir1/dir2/d ...

  2. Docker之操作系统Alpine

    简介 图 1.24.2.1 - Apline Linux 操作系统 Alpine 操作系统是一个面向安全的轻型 Linux 发行版.它不同于通常 Linux 发行版,Alpine 采用了 musl l ...

  3. Navicat Premium15安装与激活

    Navicat premium是一款数据库管理工具,是一个可多重连线资料库的管理工具,它可以让你以单一程式同时连线到 MySQL.SQLite.Oracle 及 PostgreSQL 资料库,让管理不 ...

  4. C#中如何将图片添加为程序的资源

    C#中将图片添加为程序的资源的步骤: 1.在C#程序的"Properties"文件夹中双击Resources.resx文件,以便打开资源文件,使其处于可编辑状态: 2.在打开后的R ...

  5. 【狂神说Java】Java零基础学习笔记-Java数组

    [狂神说Java]Java零基础学习笔记-Java数组 Java数组01:数组的定义 数组是相同类型数据的有序集合. 数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成. 其中,每一个数 ...

  6. Solution -「LOCAL」菜

    \(\mathscr{Description}\)   Private link.   给定 \(N,L,X,Y,K\),求选出 \(0\le a_1\le a_2\le\cdots a_{N-1}\ ...

  7. C#正则表达式匹配候选词

    来自文心一言(多次修改才正确的): public App() { string input = "例子文字{备选,:'词1t324|备选词2gdfg,该方法|备选词3dsfdsf}继续{备选 ...

  8. 前端(四)-jQuery

    1.jQuery的基本用法 1.1 jQuery引入 <script src="js/jquery-3.4.1.min.js" type="text/javascr ...

  9. Superset用户集成方案2

    superset 认证分析 superset基于flask-appbuilder开发,security基于flask_appbuilder.security,翻阅其代码, 找到入口: superset ...

  10. MongoDB：数据库操作