时间戳

首页 > 解决方案 > JavaScript 将 CSS 应用于图像并保存

javascript - JavaScript 将 CSS 应用于图像并保存

问题描述

我一直在寻找一种将我的 CSS 样式转换为实际图像的方法：

配置文件.scss：

  .profile-image {
  position: relative;
  .img1 {
    position: relative;
    -webkit-mask: url("../pages/JoinUs/images/mas.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    width: 100% !important;
  }
  .img2 {
    position: absolute;
    //float: left;
    transform: rotate(-26.5deg);
    -webkit-mask: url("../pages/JoinUs/images/mas.png");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-filter: grayscale(100%) sepia(80%) hue-rotate(359deg)
      saturate(1200%) brightness(100%) contrast(1);
    width: 100% !important;
  }
}

个人资料.tsx：

class ProfileImage extends Component {
    render() {
        const {image } = this.props
        return (
            <div className="profile-image ml-3 ml-md-1">
                    <img className='lazyload px-2  img2' src={image } alt='image8' />
                    <img className='lazyload px-2  img1' src={image } alt='image8' /> 
            </div>
        );
    }
}

我不确定我应该确切地寻找什么，但我想以编程方式将这 2 个图像标签混合在一个文件中，以便稍后提供而无需对其进行样式设置。有什么办法可以做到吗？

谢谢

标签： javascriptcssnode.jssass

解决方案

推荐阅读