react中SVG的使用(改变大小颜色) + REM的缩放大小(sketch复制代码)

第一步从sketch中复制成SVG图片

<svg width="30px" height="25px" viewBox="0 0 30 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 45.1 (43504) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-503.000000, -144.000000)" fill="#03C3F4">
            <g id="tab" transform="translate(0.000000, 125.000000)">
                <g id="Group" transform="translate(48.000000, 17.000000)">
                    <path d="M461.156249,5 L461.851707,3.25833089 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值